shiki

tcmts.content.shiki · #5vdhhhsd · function · runs anywhere

A Highlight made with Shiki: code in one of langs highlighted in a light and a dark theme (github-light and github-dark, by default). The light theme's colours are written in (defaultColor: "dark" for the dark one's), and both are CSS variables, --shiki-light and --shiki-dark; with defaultColor: false, only those.

import type { Highlight } from "#codebase/tcmts/content";
import { createHighlighter } from "shiki";

export async function shiki(options: {
  langs: string[];
  themes?: { light: string; dark: string };
  defaultColor?: "light" | "dark" | false;
}): Promise<Highlight> {
  const themes = options.themes ?? { light: "github-light", dark: "github-dark" };
  const hl = await createHighlighter({ themes: [themes.light, themes.dark], langs: options.langs });
  const langs = new Set(options.langs);
  return (code, lang) =>
    langs.has(lang)
      ? hl.codeToHtml(code, { lang, themes, defaultColor: options.defaultColor ?? "light" })
      : undefined;
}

uses

used by