feat: improve highlighting

.gitignore

@@ -169,3 +169,5 @@ $RECYCLE.BIN/
 **/.idea
 **/live.db
 .nginx/
+
+**/.DS_Store

frontend/package.json

@@ -14,26 +14,26 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-node": "^1.2.4",
-    "@sveltejs/kit": "^1.5.0",
-    "@typescript-eslint/eslint-plugin": "^5.45.0",
-    "@typescript-eslint/parser": "^5.45.0",
-    "eslint": "^8.28.0",
-    "eslint-config-prettier": "^8.5.0",
+    "@sveltejs/kit": "^1.16.2",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
+    "@typescript-eslint/parser": "^5.59.2",
+    "eslint": "^8.40.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-svelte": "^2.26.0",
-    "prettier": "^2.8.0",
-    "prettier-plugin-svelte": "^2.8.1",
+    "eslint-plugin-svelte": "^2.27.3",
+    "prettier": "^2.8.8",
+    "prettier-plugin-svelte": "^2.10.0",
     "sass": "^1.62.1",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.0.1",
-    "tslib": "^2.4.1",
-    "typescript": "^5.0.0",
-    "vite": "^4.3.0"
+    "svelte": "^3.59.0",
+    "svelte-check": "^3.3.1",
+    "tslib": "^2.5.0",
+    "typescript": "^5.0.4",
+    "vite": "^4.3.5"
   },
   "type": "module",
   "dependencies": {
-    "@calor/core": "^0.0.4",
-    "@calor/highlighter": "^0.0.4",
+    "@calor/core": "^0.0.5",
+    "@calor/highlighter": "^0.0.5",
     "codemirror": "^5.65.13",
     "codemirror-github-dark": "^0.4.1",
     "codemirror-github-light": "^0.4.2",

frontend/src/routes/[id]/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { Language } from '@calor/core';
-  import { highlight } from '@calor/highlighter';
+  import { detectLanguage, getParseRule, Language, tokenize } from '@calor/core';
   import '@calor/highlighter/themes/github-light.css';
   import hljs from 'highlight.js';
   import 'highlight.js/styles/github.css';
@@ -24,25 +23,45 @@
       return lang;
     }
   };
+
+  const escapeHTML = (text: string) => {
+    return text.replace(/[&<>]/g, (match) => {
+      switch (match) {
+      case '&':
+        return '&amp;';
+      case '<':
+        return '&lt;';
+      case '>':
+        return '&gt;';
+      default:
+        return match;
+      }
+    });
+  };
+
+  const calorHighlighter = (code: string, language?: string): string => {
+    if (language == null) {
+      language = detectLanguage(code);
+    }
+    const tokens = tokenize(code, getParseRule(language));
+    const html = tokens.reduce((acc, token) => {
+      acc += escapeHTML(token.value).split(/\r?\n/).map((v) => `<span class="calor-${token.kind}">${v}</span>`).join('\n');
+      return acc;
+    }, '');
+    return html;
+  };
+
   if (payload.language !== 'auto') {
     if (calorLanguages.includes(calorRemap(payload.language))) {
-      value = highlight(payload.content, calorRemap(payload.language));
+      value = calorHighlighter(payload.content, calorRemap(payload.language));
     } else {
       value = hljs.highlight(payload.content, { language: payload.language }).value;
     }
   } else {
     value = hljs.highlightAuto(payload.content).value;
   }
-
-  // unwrap calor wrapper
-  const dom = new DOMParser().parseFromString(value, 'text/html');
-  const pre = dom.querySelector('pre.calor-wrapper');
-  if (pre != null) {
-    value = pre.innerHTML;
-  }
-
-  let lines = value.split(/\r?\n/);
-  let lineNumberWidth = 20 + lines.length.toString().length * 8;
+  const lines = value.split(/\r?\n/);
+  const lineNumberWidth = 20 + lines.length.toString().length * 8;
   value = lines
     .map((v, i) => {
       return `<div class="gutter" style="grid-template-columns: ${lineNumberWidth}px 1fr" data-line="${i + 1}"><span class="line-number" draggable="true" style="">${