How toAdd syntax highlight to Markdoc using Prism.js

If you're using Markdoc like me, you may want to add syntax highlight, this is how I added it on my blog

First install the Prism.js package.

npm add prismjs
npm add -D @types/prismjs

Now, let create a component called Fence that will receive any code block and call Prism.

app/components/fence.tsx
import Prism from "prismjs";

// Load the grammars you want to support
import "prismjs/components/prism-cshtml";
import "prismjs/components/prism-css";
import "prismjs/components/prism-javascript";
import "prismjs/components/prism-json";
import "prismjs/components/prism-jsx";
import "prismjs/components/prism-typescript";

type FenceProps = {
  children: string;
  language: string;
};

export function Fence({ children, language }: FenceProps) {
  let content = Prism.highlight(children, Prism.languages[language], language);

  return (
    <pre
      className={`language-${language}`}
      dangerouslySetInnerHTML={{ __html: content }}
    />
  );
}

export const fence = {
  render: "Fence",
  attributes: { language: { type: String } }
};

Now, go to where you call the Markdoc.transform function and pass your fence object.

app/modules/md.server.ts
import { parse, transform } from "@markdoc/markdoc";

// Here import your `fence` object
import { fence } from "~/components/fence";

export function parse(content: string) {
  return transform(parse(content), { nodes: { fence } })
}

And then use the Fence component where you render the React components.

app/components/markdown.tsx
import type { RenderableTreeNodes } from "@markdoc/markdoc";

import { renderers } from "@markdoc/markdoc";
import * as React from "react";

// Here import your component
import { Fence } from "~/components/fence";

type Props = { content: RenderableTreeNodes };

export function MarkdownView({ content }: Props) {
  return <>{renderers.react(content, React, { components: { Fence } })}</>;
}

And that's it.