front-matter VS marked

front-matter parser

What we want is for our editor to take the combination of front-matter data and markup, then be able to extract the two before storing that data separately somewhere. We'll be using the front-matter module to extract the data we need from the text editor content.

For a small page like that, they are using Oracle content management, knockoutjs, RedwoodJs, MarkedJs, MustacheJs, JQuery and Bootstrap. There's like 10+ layers or div, header and nav elements just to display the logo. They can't even properly anchor the footer at the bottom...

MarkedJS

snarkdown is a barebones markdown parser with the sole purpose of converting markdown to HTML. This could be used in cases where you don't need a full fledged tool like marked or remark

or an NPM module like https://github.com/markedjs/marked

It provides side by side preview and it's using MarkedJS so that you have everything Github Flavored Markdown offers and styled with TailwindCSS to match Dev.to dark theme. The toolbar has the most common markdown syntax including tables, code blocks and many more.

Throughout this tutorial, you may have wondered “Why don’t we just parse the markdown on the client?”

Finally, look at the fullRecipe component. This takes in the recipe object from the props and displays all the fields. You will notice that there is a library called Marked being imported here then used in a small function called getMarkdownText. This is necessary because some of the fields you want to display (Ingredients and Instructions) are rich text types. Rich text in Strapi uses Markdown, but the formatting you used when creating your recipes will not automatically appear correctly on the frontend. You will need to use a library (like Marked) to convert the Markdown formatting to HTML. To download and install Marked, simply run npm install marked.