add code highlighting and math formatting
This commit is contained in:
parent
9fdb124304
commit
27830711fd
3 changed files with 64 additions and 1 deletions
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue