add code highlighting and math formatting

Author: VJHack

examples/server/webui/package-lock.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",

examples/server/webui/package.json

@@ -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;