Files
discord.js/apps/website/src/components/SyntaxHighlighter.tsx
2024-02-29 04:37:52 +01:00

34 lines
805 B
TypeScript

import { getHighlighterCore } from 'shiki/core';
import getWasm from 'shiki/wasm';
const highlighter = await getHighlighterCore({
themes: [import('shiki/themes/github-light.mjs'), import('shiki/themes/github-dark-dimmed.mjs')],
langs: [import('shiki/langs/typescript.mjs'), import('shiki/langs/javascript.mjs')],
loadWasm: getWasm,
});
export async function SyntaxHighlighter({
lang,
code,
className = '',
}: {
readonly className?: string;
readonly code: string;
readonly lang: string;
}) {
const codeHTML = highlighter.codeToHtml(code.trim(), {
lang,
themes: {
light: 'github-light',
dark: 'github-dark-dimmed',
},
});
return (
<>
{/* eslint-disable-next-line react/no-danger */}
<div className={className} dangerouslySetInnerHTML={{ __html: codeHTML }} />
</>
);
}