|
|
@@ -4,7 +4,7 @@ import MarkdownIt from 'markdown-it';
|
|
|
import hljs from 'highlight.js';
|
|
|
import mila from 'markdown-it-link-attributes';
|
|
|
import markdownItMath from 'markdown-it-math';
|
|
|
-import mdKatex from 'markdown-it-katex';
|
|
|
+import mdKatex from '@iktakahiro/markdown-it-katex';
|
|
|
import mathjax from 'markdown-it-mathjax';
|
|
|
|
|
|
const props = defineProps({
|
|
|
@@ -14,12 +14,26 @@ const props = defineProps({
|
|
|
}
|
|
|
})
|
|
|
|
|
|
+const highlightBlock = (str, lang) => {
|
|
|
+ return `
|
|
|
+ <code class="hljs code-block-body ${lang}">${str}</code>
|
|
|
+ `
|
|
|
+}
|
|
|
const mdi = new MarkdownIt({
|
|
|
html: true,
|
|
|
linkify: true,
|
|
|
breaks: true,
|
|
|
typographer: true,
|
|
|
+ highlight(code, language) {
|
|
|
+ const validLang = !!(language && hljs.getLanguage(language))
|
|
|
+ if (validLang) {
|
|
|
+ const lang = language ?? ''
|
|
|
+ return highlightBlock(hljs.highlight(code, { language: lang }).value, lang)
|
|
|
+ }
|
|
|
+ return highlightBlock(hljs.highlightAuto(code).value, '')
|
|
|
+ },
|
|
|
})
|
|
|
+
|
|
|
mdi.use(mila, { attrs: { target: '_blank', rel: 'noopener' } });
|
|
|
|
|
|
mdi.use(markdownItMath, {
|
|
|
@@ -34,6 +48,8 @@ mdi.use(mdKatex, {
|
|
|
errorColor: ' #cc0000',
|
|
|
})
|
|
|
|
|
|
+mdi.renderer.rules.table_open = function (tokens, idx, options, env, self) { return '<div class="custom-table-wrapper"><table>'; };
|
|
|
+mdi.renderer.rules.table_close = function () { return '</table></div>'; };
|
|
|
|
|
|
const text = computed(() => {
|
|
|
const value = props.content ?? ""
|
|
|
@@ -42,16 +58,10 @@ const text = computed(() => {
|
|
|
return value
|
|
|
})
|
|
|
|
|
|
-
|
|
|
-const res123 = mdi.render(`$$P_{待估} = \\frac{1/a}{1/a+1/b+1/c}*P_A+\\frac{1/b}{1/a+1/b+1/c}*P_B+\\frac{1/c}{1/a+1/b+1/c}*P_C$$`)
|
|
|
-
|
|
|
-
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <div ref="formulaContainer" class="formula-container"></div>
|
|
|
<div class="markdown-body text-[15px] break-all" v-if="content">
|
|
|
- <!-- <div v-html="result"></div> -->
|
|
|
<div v-html="text"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -62,9 +72,10 @@ const res123 = mdi.render(`$$P_{待估} = \\frac{1/a}{1/a+1/b+1/c}*P_A+\\frac{1/
|
|
|
}
|
|
|
|
|
|
.markdown-body {
|
|
|
-
|
|
|
.custom-table-wrapper {
|
|
|
width: 710px;
|
|
|
+ padding: 10px;
|
|
|
+ background: #eff8fc;
|
|
|
margin-bottom: 16px;
|
|
|
overflow-x: scroll;
|
|
|
|
whh