Convert Markdown to HTML

Learn how to convert the content of your blog post from Markdown to HTML.

We'll cover the following

If you use Markdown when you create the content of a blog post, e.g.

A new blog post:

This is a blog post written in Markdown. It supports **bold** and _italic_ formatting, among all other Markdown syntaxes.

That blog post draft on DEV is nicely formatted, as we would expect. However, in our own web application, we see the raw Markdown. You can navigate to /blog and click on the blog title to see this in action. Let’s fix it.

Markdown to HTML

All we need to do is convert the blog content from Markdown to HTML before we display it. To do that, click Run and install the marked NPM package in services/web.

npm i -S marked

Open the services/web/src/routes/blog/[slug].svelte file and import the NPM package in the second <script> tag.

import marked from "marked";

In the HTML towards the end of the file, replace the {post.content} line with the following:

{@html marked(post.content)}

Click Run again to save the changes.

Get hands-on with 1400+ tech skills courses.