The Node.js® Website
keii.dev
1import { getHighlighterCore } from 'shiki/core';
2import type { HighlighterCore } from 'shiki/core';
3import getWasm from 'shiki/wasm';
4
5import { LANGUAGES, DEFAULT_THEME } from '@/shiki.config.mjs';
6
7// This creates a memoized minimal Shikiji Syntax Highlighter
8export const getShiki = () =>
9 getHighlighterCore({
10 themes: [DEFAULT_THEME],
11 langs: LANGUAGES,
12 loadWasm: getWasm,
13 });
14
15export const highlightToHtml =
16 (shiki: HighlighterCore) => (code: string, language: string) =>
17 // Shiki will always return the Highlighted code encapsulated in a <pre> and <code> tag
18 // since our own CodeBox component handles the <code> tag, we just want to extract
19 // the inner highlighted code to the CodeBox
20 shiki
21 .codeToHtml(code, { lang: language, theme: DEFAULT_THEME })
22 .match(/<code>(.+?)<\/code>/s)![1];
23
24export const highlightToHast =
25 (shiki: HighlighterCore) => (code: string, language: string) =>
26 shiki.codeToHast(code, { lang: language, theme: DEFAULT_THEME });