feat: shiki

package.json

@@ -58,7 +58,6 @@
         "eslint-config-prettier": "^8.10.0",
         "eslint-plugin-svelte": "^2.40.0",
         "fuse.js": "^7.0.0",
-        "highlight.js": "^11.9.0",
         "markdown-it": "^14.1.0",
         "meilisearch": "^0.37.0",
         "motion": "^10.18.0",
@@ -71,6 +70,7 @@
         "prettier-plugin-tailwindcss": "^0.6.6",
         "remeda": "^2.10.0",
         "sass": "^1.77.6",
+        "shiki": "^1.16.1",
         "svelte": "^4.2.18",
         "svelte-check": "^3.8.1",
         "svelte-markdoc-preprocess": "^2.0.0",

src/lib/animations/CodeWindow/Code.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-    import '$scss/hljs.css';
-
+    import '$scss/shiki.css';
     import { getCodeHtml } from '$lib/utils/code';
 
     export let content: string;
-    $: codeHtml = getCodeHtml({ content, language: 'js' });
+    $: html = getCodeHtml({ content, language: 'js' });
 </script>
 
 <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-{@html codeHtml}
+{@html html}

src/lib/utils/code.ts

@@ -1,73 +1,52 @@
-import type { LanguageFn } from 'highlight.js';
-import hljs from 'highlight.js/lib/core';
-import go from 'highlight.js/lib/languages/go';
-import dart from 'highlight.js/lib/languages/dart';
-import javascript from 'highlight.js/lib/languages/javascript';
-import typescript from 'highlight.js/lib/languages/typescript';
-import xml from 'highlight.js/lib/languages/xml';
-import shell from 'highlight.js/lib/languages/shell';
-import markdown from 'highlight.js/lib/languages/markdown';
-import json from 'highlight.js/lib/languages/json';
-import swift from 'highlight.js/lib/languages/swift';
-import php from 'highlight.js/lib/languages/php';
-import python from 'highlight.js/lib/languages/python';
-import diff from 'highlight.js/lib/languages/diff';
-import ruby from 'highlight.js/lib/languages/ruby';
-import csharp from 'highlight.js/lib/languages/csharp';
-import kotlin from 'highlight.js/lib/languages/kotlin';
-import java from 'highlight.js/lib/languages/java';
-import cpp from 'highlight.js/lib/languages/cpp';
-import bash from 'highlight.js/lib/languages/bash';
-import powershell from 'highlight.js/lib/languages/powershell';
-import dos from 'highlight.js/lib/languages/dos';
-import yaml from 'highlight.js/lib/languages/yaml';
-import plaintext from 'highlight.js/lib/languages/plaintext';
-import graphql from 'highlight.js/lib/languages/graphql';
-import http from 'highlight.js/lib/languages/http';
-import css from 'highlight.js/lib/languages/css';
-import groovy from 'highlight.js/lib/languages/groovy';
-import ini from 'highlight.js/lib/languages/ini';
+import {
+    createCssVariablesTheme,
+    createHighlighter,
+    type BuiltinLanguage,
+    type PlainTextLanguage
+} from 'shiki';
 import { Platform } from './references';
 
-const languages = {
-    js: javascript,
-    javascript: javascript,
-    dart: dart,
-    ts: typescript,
-    typescript: typescript,
-    deno: typescript,
-    xml: xml,
-    html: xml,
-    sh: shell,
-    md: markdown,
-    json: json,
-    swift: swift,
-    php: php,
-    diff: diff,
-    python: python,
-    ruby: ruby,
-    csharp: csharp,
-    kotlin: kotlin,
-    java: java,
-    cpp: cpp,
-    bash: bash,
-    powershell: powershell,
-    cmd: dos,
-    yaml: yaml,
-    text: plaintext,
-    graphql: graphql,
-    http: http,
-    go: go,
-    py: python,
-    rb: ruby,
-    cs: csharp,
-    css: css,
-    groovy: groovy,
-    ini: ini,
-    env: ini
-} as const satisfies Record<string, LanguageFn>;
+export type Language = BuiltinLanguage | PlainTextLanguage;
 
-const platformAliases: Record<string, keyof typeof languages> = {
+const languages: Language[] = [
+    'js',
+    'javascript',
+    'dart',
+    'ts',
+    'typescript',
+    'xml',
+    'html',
+    'sh',
+    'md',
+    'json',
+    'swift',
+    'php',
+    'diff',
+    'python',
+    'ruby',
+    'csharp',
+    'kotlin',
+    'java',
+    'cpp',
+    'bash',
+    'powershell',
+    'cmd',
+    'yaml',
+    'text',
+    'graphql',
+    'http',
+    'go',
+    'py',
+    'rb',
+    'cs',
+    'css',
+    'groovy',
+    'ini',
+    'txt',
+    'dotenv'
+];
+
+const platformAliases: Record<string, Language> = {
     [Platform.ClientWeb]: 'js',
     [Platform.ClientFlutter]: 'dart',
     [Platform.ClientApple]: 'swift',
@@ -88,44 +67,45 @@ const platformAliases: Record<string, keyof typeof languages> = {
     [Platform.ServerKotlin]: 'kotlin',
     [Platform.ServerGraphql]: 'graphql',
     [Platform.ServerRest]: 'http',
-    [Platform.ServerGo]: 'go',
-    vue: 'html',
-    svelte: 'html'
+    [Platform.ServerGo]: 'go'
 };
 
-Object.entries(languages).forEach(([key, value]) => {
-    hljs.registerLanguage(key, value);
-});
-
-Object.entries(platformAliases).forEach(([key, value]) => {
-    hljs.registerAliases(key, {
-        languageName: value
-    });
-});
-
-export type Language = keyof typeof languages | Platform;
-
 type Args = {
     content: string;
     language?: Language;
     withLineNumbers?: boolean;
 };
 
-export const getCodeHtml = (args: Args) => {
-    const { content, language, withLineNumbers } = args;
-    const res = hljs.highlight(content, { language: language ?? 'sh' }).value;
-    const lines = res.split(/\n/g);
+const theme = createCssVariablesTheme({
+    name: 'appwrite',
+    variablePrefix: '--shiki-',
+    fontStyle: true
+});
 
-    while (lines.length > 0 && lines[lines.length - 1] === '') {
-        lines.pop();
+const highlighter = await createHighlighter({
+    langs: languages,
+    themes: [theme],
+    langAlias: {
+        deno: 'ts',
+        vue: 'html',
+        svelte: 'html',
+        ...platformAliases
     }
+});
 
-    const final = lines.reduce((carry, line) => {
-        carry += `<span class="line">${line}</span>\n`;
-        return carry;
-    }, '');
+export const getCodeHtml = (args: Args): string => {
+    const { content, language, withLineNumbers } = args;
 
-    return `<pre><code class="web-code language-${language} ${
-        withLineNumbers ? 'line-numbers' : ''
-    }">${final}</code></pre>`;
+    return highlighter.codeToHtml(content.trim(), {
+        lang: language?.toLowerCase() ?? 'sh',
+        transformers: [
+            {
+                code(node) {
+                    this.addClassToHast(node, 'web-code');
+                    if (withLineNumbers) this.addClassToHast(node, 'line-numbers');
+                }
+            }
+        ],
+        theme: 'appwrite'
+    });
 };

src/markdoc/nodes/Fence.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import '$scss/hljs.css';
+    import '$scss/shiki.css';
     import { getCodeHtml, type Language } from '$lib/utils/code';
     import { getContext, hasContext } from 'svelte';
     import { platformMap } from '$lib/utils/references';