First, I wanted to create a simple abstraction between what markdown processor we use so that we'll be free to switch between different markdown processors (as i've already done). To do this, I created a simple processor object that contains an internal processor (the processor we're using at the time) + a process function, that turns markdown text into HTML text. The code is pretty simple and is as follows:
<pre><code class="language-javascript">import markdownit from &#x27;markdown-it&#x27;;
import hljs from &#x27;highlight.js&#x27;

export const MarkdownProcessor = {
 _processor: markdownit({
 html: true,
 // highlight pulled from https://github.com/markdown-it/markdown-it#syntax-highlighting
 highlight: function (str, lang) {
 if (lang &amp;&amp; hljs.getLanguage(lang)) {
 try {
 return hljs.highlight(str, { language: lang }).value;
 } catch (__) {}
 }
 return &#x27;&#x27;; // use external default escaping,
 }
 }),
 process(content: string): string {
 return this._processor.render(content);
 },
}
</code></pre>
Now, we can go from
<pre><code class="language-javascript">import { remark } from &quot;remark&quot;;
import html from &quot;remark-html&quot;;
// ...
const processedContent = await remark()
 .use(html)
 .process(matterResult.content);
 const contentHtml = processedContent.toString();
</code></pre>
to
<pre><code class="language-javascript">import { MarkdownProcessor } from &quot;./MarkdownProcessor&quot;;

//...
const post = MarkdownProcessor.process(content);
//...
</code></pre>
*As a side note, this behavior should also be achieved via relatively similar means through <code>remark</code> as well, I just wanted to try out a differnt library :)
The <code>post</code> variable should contain all of the html fitted with all of the proper code tags and useful class names to hook into for custom styling. For the sake of having a working solution, I opted to use one of highlight.js's provided themes, the <a href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.css">github.css</a> theme! This will almost certainly change in the future, but it gets the job done for now!
Next, I will be looking to add some support for uploading assets and referencing them in posts! Until then...
Jacob

Blog Posts