Code Talk: Adding Syntax Highlighted Code Blocks

This is going to be a pretty straight-forward post—almost micro-blog short. Essentially, I wanted to add syntax highlighted code blocks. In this Next.js template, the codeblocks came pretty bare. There were no borders and the code would add an awkward horizontal scroll to the page. Also, there was no syntax highlighting, so it was just a wave of black text.

I added the following to get started:

yarn add rehype-highlight`
yarn add highlight.js`
yarn add rehype-stringify`
yarn add remark-gfm`
yarn add remark-rehype

I updated my src/lib/markdownToHtml.ts file to incorporate these packages. Originally, it was just five lines:

// filelocation: src/lib/markdownToHtml.ts
import { remark } from "remark";
import html from "remark-html";

export default async function markdownToHtml(markdown: string) {
  const result = await remark().use(html).process(markdown);
  return result.toString();
}

The single remark-html plugin turned my markdown blog posts in to HTML, but it left the code blocks monochrome and with no other styling other than monospace fonts.

I rebuilt the hyelper as a remark -> rehype pipeline so that I can get syntax colors and even more extra features in the future (GitHub style tables).

// filelocation: src/lib/markdownToHtml.ts
import { unified } from "unified";
import remarkParse      from "remark-parse";
import remarkGfm        from "remark-gfm";
import remarkRehype     from "remark-rehype";
import rehypeHighlight  from "rehype-highlight";
import rehypeStringify  from "rehype-stringify";

export default async function markdownToHtml(markdown: string) {
  const html = await unified()
    .use(remarkParse)     // Markdown ➜ mdast
    .use(remarkGfm)       // GitHub goodies
    .use(remarkRehype)    // mdast ➜ hast
    .use(rehypeHighlight) // colour every token
    .use(rehypeStringify) // hast ➜ HTML string
    .process(markdown);

  return String(html);
}

In my src/app/globals.css file, I imported Highlight.js. This .js file gives me 40+ themes to choose from—I opted for Visual Studio Code 2015 dark-dimmed.

/* filelocation: src/app/globals.css */
@import 'highlight.js/styles/vs2015.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

I did some polishing in the <pre> tag as well:

/* filelocation: src/app/globals.css */
pre {
  background: #0d1117;
  color: #c9d1d9;
  font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
  font-size: .875rem;
  padding: 1rem 1.25rem;
  border-radius: .5rem;
  overflow-x: auto;
}
pre code { display: grid; }

I thought about switching over to rehype-pretty-code, but maybe another time as this suits my needs for right now.