import {createHighlighter} from "shiki"
import {escapeSvelte} from "mdsvex"
import {
  transformerNotationHighlight,
  transformerNotationDiff
} from "@shikijs/transformers"

const theme = 'material-theme'

export const highlighter = await createHighlighter({
  themes: [theme],
  langs: [
    'javascript',
    'typescript',
    'html',
    'markdown',
    'mdx',
    'bash',
    'svelte',
    'yaml',
    'lua',
    'python'
  ]
});

export const shikiHighlighter = async (code, lang = 'text') => {
  const html = escapeSvelte(highlighter.codeToHtml(
    code,
    {
      lang,
      theme,
      transformers: [
        transformerNotationHighlight(),
        transformerNotationDiff()
      ]
    }
  ));
  return `{@html \`${html}\` }`;
}