import { createHighlighter } from "shiki";

const highlighter = await createHighlighter({
  themes: ["ayu-dark"],
  langs: [
    "javascript",
    "typescript",
    "svelte",
    "html",
    "css",
    "bash",
    "json",
    "yaml",
    "markdown",
    "python",
  ],
});

/** @type {import('mdsvex').MdsvexOptions} */
const mdsvexConfig = {
  extensions: [".svx"],
  highlight: {
    highlighter: async (code, lang) => {
      const html = highlighter.codeToHtml(code, {
        lang: lang || "text",
        theme: "ayu-dark",
      });
      return `{@html \`${html.replace(/[{}`]/g, (c) => `&#${c.charCodeAt(0)};`)}\`}`;
    },
  },
};

export default mdsvexConfig;