Perfect syntax highlighting with Shiki and React Server Components in under 50 lines of code

shiki.tsx

import { getHighlighter as shikiGetHighlighter } from "shiki";
import { cache } from "react";

interface ShikiProps {
  code: string;
  lang: string;
  theme: string;
}

export async function Shiki({ code, lang, theme }: ShikiProps) {
  const highlighter = await getHighlighter(lang, theme);

  const html = highlighter.codeToHtml(code, {
    lang,
    theme,
  });

  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

const highlighterPromise = shikiGetHighlighter({});

const getHighlighter = cache(async (language: string, theme: string) => {
  console.log("Loading highlighter", language, theme);
  const highlighter = await highlighterPromise;
  const loadedLanguages = highlighter.getLoadedLanguages();
  const loadedThemes = highlighter.getLoadedThemes();

  let promises = [];
  if (!loadedLanguages.includes(language as any)) {
    promises.push(highlighter.loadLanguage(language as any));
  }

  if (!loadedThemes.includes(theme as any)) {
    promises.push(highlighter.loadTheme(theme));
  }

  await Promise.all(promises);

  return highlighter;
});

How are you using the Shiki component? Everything I've tried ends up with Type 'Promise<Element>' is not assignable to type 'ReactNode'

@shellscape this is a server component, you need to be using it in a framework that supports it like Next.js 13+

@tom-sherman should this also use makeSingletonHighlighter as in this blog post?

• https://www.luckymedia.dev/blog/syntax-highlighting-with-shiki-react-server-components-and-next-js

@karlhorky maybe, this gist predates that article by almost a year and I don't think that API existed when I created it.