So I have my blog post pages displayed as follows:
blog-post.js
export default function BlogPost({ data }) {
const post = data.markdownRemark
return (
<Layout>
<div className="blog-post-container">
<div className="div-grey-post"></div>
<div className="blog-post">
<div className="top-post">
<div className="featuredimage" ><img src={ post.frontmatter.featuredimage} loading="lazy" width="500" alt="" className="img-large-post"/></div>
<div className="short-description">
<Heading color="dark">{post.frontmatter.title}</Heading>
<div className="parpost light">{post.frontmatter.date}</div>
<div className="tags-div">
{post.frontmatter.tags.map((tag) => (
<Link key={tag + `tag`} to={`/tags/${kebabCase(tag)}/`}><div className="div-tag">{tag}</div></Link>
))}</div>
<p className="parpost">{post.frontmatter.short_description}</p>
</div>
</div>
<div className="div-text-post" dangerouslySetInnerHTML={{ __html: post.frontmatter.mk1 }} />
<div className="div-text-post" dangerouslySetInnerHTML={{ __html: post.frontmatter.mk2 }} />
</div>
<div className="div-grey-post"></div>
</div>
</Layout>
In this section I’m attempting to render 2 markdown fields in separate divs
<div className="div-text-post" dangerouslySetInnerHTML={{ __html: post.frontmatter.mk1 }} />
<div className="div-text-post" dangerouslySetInnerHTML={{ __html: post.frontmatter.mk2 }} />
It renders like this on my .md files
random.md
---
title: Huertos que funcionan en interiores
date: 2021-09-03T17:01:58.389Z
featuredimage: /assets/cultivo-en-casa-de-rabanitos.jpg
categoria: Naturaleza
tags:
- cultivo
- encasa
- indoors
short-description: "En este artículo estudiaremos cómo se pueden cultivar
hortalizas en el interior, incluso en invierno. Es importante utilizar mucha
luz y agua cuando se cultivan verduras en el interior. También necesitarás un
espacio luminoso que reciba al menos 6 horas de luz solar al día para obtener
los mejores resultados. Estos son algunos consejos para elegir el tipo de
hortaliza adecuado para cultivar en interiores:"
mk1: >-
### Tomate Cherry
Los tomates cherry son unas de las plantas más fáciles de cultivar en macetas, pero recuerda que necesitan mucha luz solar y calor......
![to](/assets/1239x697.jpg "to")
### Lechuga
La lechuga es ...
![le](/assets/lechuga-en-macetero.jpg "le")
### Zanahorias
Para empezar, ...
![za](/assets/maceta-zanahorias-6dic14.jpg "za")
mk2: >-
### Albahaca
La albahaca ...
![al](/assets/como-cuidar-la-albahaca.jpg "al")
As you can see, even though the .md is saving the info with the correct rich text format, I cannot make this render as a markdown widget.
I think that you already assumed this much.
What I would like is to have multiple markdown fields and separate them in different divs like this:
config.yml
fields:
- { name: title, label: Titulo, hint: Título llamativo y corto, required: true}
- { name: date, label: Date, widget: datetime }
- {label: "Imagen Principal", hint: Usar una imagen en alta resolucion y artistica, name: "featuredimage", widget: image, required: true}
- { collection: categoria, valueField: categoria, searchFields: ["categoria"], displayFields: ["categoria"], widget: relation, name: categoria, label: Categoria, required: true, multiple: false, hint: Poner cateogoria a la que pertenece el tema. OBLIGATORIO}
- {label: "Tags", name: "tags", widget: "list", hint: Separar con comas cada tag relacionado al post (ej. harrypotter, potterheads) poner al menos 3 tags por post, ideal 5, required: true}
--------THIS SECTION BELOW WILL BE SEVERAL MARKDOWN FIELDS--------
- { name: mkd1, label: Post, widget: markdown }
- { name: mkdy2, label: Post, widget: markdown }
- { name: mkdy3, label: Post, widget: markdown }
. My question is, how do I do the parsing mentioned above in this case for several markdown fields?
I would appreciate a lot your help here