<h2 id="overview"><a href="#overview" aria-hidden="true" tabindex="-1"></a>Overview</h2>
How do we convert markdown to html ?
That is a great question!
It’s exactly what we’re going to cover in this short guide!
Come to think of it - It’s easier than you think.
Let’s jump into it.
<h2 id="the-goal"><a href="#the-goal" aria-hidden="true" tabindex="-1"></a>The Goal</h2>
In this guide, we’re going to create a function that takes in the contents of the markdown, and transform.
The end result should be a html string.
The scaffold:
<div class="remark-highlight"><pre class="language-ts"><code>const markdownToHtml = async(
 content: string,
): Promise&lt;string&gt; =&gt; {
 // Logic goes here
}
</code></pre></div>
input:
<ul>
<li>content - this is the markdown content (string)</li>
</ul>
output
<ul>
<li>This is the transformed html string</li>
</ul>
<h2 id="what-tool-do-i-need-"><a href="#what-tool-do-i-need-" aria-hidden="true" tabindex="-1"></a>What tool do I need ?</h2>
We’re going to use Bun to it easier to work with modern Typescript/ES6.
To Install it, check out the <a href="https://bun.sh/docs/installation" target="_blank" rel="nofollow noopener noreferrer">Installation Guide</a>.
<h2 id="the-steps"><a href="#the-steps" aria-hidden="true" tabindex="-1"></a>The Steps</h2>
<h4 id="1-initialize-the-bun-repo"><a href="#1-initialize-the-bun-repo" aria-hidden="true" tabindex="-1"></a>1. Initialize the bun repo</h4>
Run the following command (in your terminal):
<div class="remark-highlight"><pre class="language-sh"><code>bun init -y
</code></pre></div>
<h4 id="2-install-required-packages"><a href="#2-install-required-packages" aria-hidden="true" tabindex="-1"></a>2. Install required packages</h4>
Here are a few packages we need to parse and transform the markdown to html.
Run the following command (in your terminal):
<div class="remark-highlight"><pre class="language-sh"><code>bun install unified \
remark-parse \
remark-rehype \
rehype-stringify
</code></pre></div>
<h4 id="3-add-in-our-scaffold-from-above"><a href="#3-add-in-our-scaffold-from-above" aria-hidden="true" tabindex="-1"></a>3. Add in our scaffold (from above)</h4>
<div class="remark-highlight"><pre class="language-ts line-numbers"><code>const markdownToHtml = async(
 content: string,
): Promise&lt;string&gt; =&gt; {
 // Logic goes here
}
</code></pre></div>
<h4 id="4-import-the-packages"><a href="#4-import-the-packages" aria-hidden="true" tabindex="-1"></a>4. Import the packages</h4>
Let’s start off by simply importing the packges.
<div class="remark-highlight"><pre class="language-ts line-numbers"><code>import { unified } from 'unified'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify'

const markdownToHtml = async(
 content: string,
): Promise&lt;string&gt; =&gt; {
 // Logic goes here
}
</code></pre></div>
<h4 id="5-initialize-unified-parser"><a href="#5-initialize-unified-parser" aria-hidden="true" tabindex="-1"></a>5. Initialize <code class="language-">unified
</code> parser</h4>
Let’s initialize the main parser (unified).
<div class="remark-highlight"><pre class="language-ts line-numbers"><code>import { unified } from 'unified'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify'

const markdownToHtml = async(
 content: string,
): Promise&lt;string&gt; =&gt; {
 const file = await unified()
}
</code></pre></div>
<h4 id="6-parse-then-transform-to-rehype-abstract-syntax-tree-ast"><a href="#6-parse-then-transform-to-rehype-abstract-syntax-tree-ast" aria-hidden="true" tabindex="-1"></a>6. Parse then transform to rehype Abstract Syntax Tree (AST)</h4>
Let’s use the remark plugin to transform the markdown to the AST.
<div class="remark-highlight"><pre class="language-ts line-numbers"><code>import { unified } from 'unified'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify'

const markdownToHtml = async(
 content: string,
): Promise&lt;string&gt; =&gt; {
 const file = await unified()
 // Remark parses Markdown to an AST (includes markdown transform)
 .use(remarkParse)
 // Remark then transforms the AST to a new rehype AST
 .use(remarkRehype)
}
</code></pre></div>
<h4 id="7-convert-it-to-html-string"><a href="#7-convert-it-to-html-string" aria-hidden="true" tabindex="-1"></a>7. Convert it to HTML string</h4>
After the above transformation, it’s still in the AST format so we’ll need to transform it to a HTML string.
Let’s add some more plugins to do that.
<div class="remark-highlight"><pre class="language-ts line-numbers"><code>import { unified } from 'unified'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify'

const markdownToHtml = async(
 content: string,
): Promise&lt;string&gt; =&gt; {
 const file = await unified()
 // Remark parses Markdown to an AST (includes markdown transform)
 .use(remarkParse)
 // Remark then transforms the AST to a new rehype AST
 .use(remarkRehype)
 // rehype-stringify transforms the rehype AST to a string of HTML
 .use(rehypeStringify)
}
</code></pre></div>
<h4 id="8-process-and-return-the-value"><a href="#8-process-and-return-the-value" aria-hidden="true" tabindex="-1"></a>8. Process and return the value</h4>
Finally, let’s pass in the markdown content so it will be processed by these functions.
Also, let’s return the value of the html string at the end.
<div class="remark-highlight"><pre class="language-ts line-numbers"><code>import { unified } from 'unified'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify'

const markdownToHtml = async(
 content: string,
): Promise&lt;string&gt; =&gt; {
 const file = await unified()
 // Remark parses Markdown to an AST (includes markdown transform)
 .use(remarkParse)
 // Remark then transforms the AST to a new rehype AST
 .use(remarkRehype)
 // rehype-stringify transforms the rehype AST to a string of HTML
 .use(rehypeStringify)
 .process(value)
 return file?.value ?? ''
}
</code></pre></div>
<h4 id="9-quick-test"><a href="#9-quick-test" aria-hidden="true" tabindex="-1"></a>9. Quick Test</h4>
<div class="remark-highlight"><pre class="language-ts line-numbers"><code>const markdownContent = `
# Hello World

This is a **test**.
`;

const htmlString = await markdownToHtml(markdownContent);
// =&gt; &lt;h1&gt;Hello World&lt;/h1&gt;
// =&gt; &lt;p&gt;This is a &lt;strong&gt;test&lt;/strong&gt;.&lt;/p&gt;
</code></pre></div>
And... There you have it!
A simple function to transform markdown into html.
If you found this helpful, be sure to share it with someone you know!

Markdown to HTML (It’s easier than you think)

Jerry Chang

BYTE-Sized

Digestable Content That Will Take You To The Next Level

Bun: Working with markdown