Better code blocks

shikiHighlighter.js

@@ -0,0 +1,37 @@
+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'
+  ]
+});
+
+export const shikiHighlighter = async (code, lang = 'text') => {
+  const html = escapeSvelte(highlighter.codeToHtml(
+    code,
+    {
+      lang,
+      theme,
+      transformers: [
+        transformerNotationHighlight(),
+        transformerNotationDiff()
+      ]
+    }
+  ));
+  return `{@html \`${html}\` }`;
+}