add code highlighting and math formatting

This commit is contained in:
VJHack 2024-12-12 14:14:18 -06:00
parent 9fdb124304
commit 27830711fd
3 changed files with 64 additions and 1 deletions

View File

@ -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",

View File

@ -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",

View File

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