From 27830711fdd9b678832786c08a8bd5a9ea2cbe90 Mon Sep 17 00:00:00 2001
From: VJHack <flymyplane21@gmail.com>
Date: Thu, 12 Dec 2024 14:14:18 -0600
Subject: [PATCH] add code highlighting and math formatting

---
 examples/server/webui/package-lock.json | 50 +++++++++++++++++++++++++
 examples/server/webui/package.json      |  3 ++
 examples/server/webui/src/main.js       | 12 +++++-
 3 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/examples/server/webui/package-lock.json b/examples/server/webui/package-lock.json
index f9104f65f..d440c3936 100644
--- a/examples/server/webui/package-lock.json
+++ b/examples/server/webui/package-lock.json
@@ -10,7 +10,10 @@
       "dependencies": {
         "autoprefixer": "^10.4.20",
         "daisyui": "^4.12.14",
+        "highlight.js": "^11.10.0",
         "markdown-it": "^14.1.0",
+        "markdown-it-highlightjs": "^4.2.0",
+        "markdown-it-katex-gpt": "^1.1.0",
         "postcss": "^8.4.49",
         "tailwindcss": "^3.4.15",
         "textlinestream": "^1.1.1",
@@ -1166,6 +1169,14 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/css-selector-tokenizer": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
@@ -1473,6 +1484,14 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "11.10.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.10.0.tgz",
+      "integrity": "sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -1503,6 +1522,21 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/katex": {
+      "version": "0.16.15",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.15.tgz",
+      "integrity": "sha512-yE9YJIEAk2aZ+FL/G8r+UGw0CTUzEA8ZFy6E+8tc3spHUKq3qBnzCkI1CQwGoI9atJhVyFPEypQsTY7mJ1Pi9w==",
+      "funding": [
+        "https://opencollective.com/katex",
+        "https://github.com/sponsors/katex"
+      ],
+      "dependencies": {
+        "commander": "^8.3.0"
+      },
+      "bin": {
+        "katex": "cli.js"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
@@ -1538,6 +1572,22 @@
         "markdown-it": "bin/markdown-it.mjs"
       }
     },
+    "node_modules/markdown-it-highlightjs": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-highlightjs/-/markdown-it-highlightjs-4.2.0.tgz",
+      "integrity": "sha512-NC7pXE8KkOl6xWJVRNt8p6wgJVznXKsE0HgYGdk6DD2tn1l4L9f0ALf3VIoGVkotNU1uGQatSxfBF1zZPUMmuQ==",
+      "dependencies": {
+        "highlight.js": "^11.9.0"
+      }
+    },
+    "node_modules/markdown-it-katex-gpt": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-katex-gpt/-/markdown-it-katex-gpt-1.1.0.tgz",
+      "integrity": "sha512-jEuoIFXoVqIXFWUH6nT4LFGKRI24tNNZV07I9mozC5adDRKE6obTtSwtuSACfHwZtqLwpsBB6gHSHH8VyZjW9w==",
+      "dependencies": {
+        "katex": "^0.16.10"
+      }
+    },
     "node_modules/mdurl": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
diff --git a/examples/server/webui/package.json b/examples/server/webui/package.json
index d656a841d..a7652fec5 100644
--- a/examples/server/webui/package.json
+++ b/examples/server/webui/package.json
@@ -14,7 +14,10 @@
   "dependencies": {
     "autoprefixer": "^10.4.20",
     "daisyui": "^4.12.14",
+    "highlight.js": "^11.10.0",
     "markdown-it": "^14.1.0",
+    "markdown-it-highlightjs": "^4.2.0",
+    "markdown-it-katex-gpt": "^1.1.0",
     "postcss": "^8.4.49",
     "tailwindcss": "^3.4.15",
     "textlinestream": "^1.1.1",
diff --git a/examples/server/webui/src/main.js b/examples/server/webui/src/main.js
index f1f35481d..535176dfa 100644
--- a/examples/server/webui/src/main.js
+++ b/examples/server/webui/src/main.js
@@ -3,6 +3,14 @@ import { createApp, defineComponent, shallowRef, computed, h } from 'vue/dist/vu
 import MarkdownIt from 'markdown-it';
 import TextLineStream from 'textlinestream';
 
+// code highlighting
+import hljs from 'highlight.js';
+import HighlightJS from 'markdown-it-highlightjs' // used integrate highlight.js into markdown-it
+import 'highlight.js/styles/github-dark.min.css';
+// math formula rendering
+import 'katex/dist/katex.min.css'
+import markdownItKatexGpt from 'markdown-it-katex-gpt'
+
 const isDev = import.meta.env.MODE === 'development';
 
 // utility functions
@@ -74,7 +82,9 @@ const THEMES = ['light', 'dark', 'cupcake', 'bumblebee', 'emerald', 'corporate',
 // markdown support
 const VueMarkdown = defineComponent(
   (props) => {
-    const md = shallowRef(new MarkdownIt({ breaks: true }));
+    const md = shallowRef(new MarkdownIt({ breaks: true}))
+    md.value.use(HighlightJS,{hljs})
+    md.value.use(markdownItKatexGpt)
     const origFenchRenderer = md.value.renderer.rules.fence;
     md.value.renderer.rules.fence = (tokens, idx, ...args) => {
       const content = tokens[idx].content;