feat: markdown mermaid
This commit is contained in:
parent
e3ce91cfa1
commit
a546d856d7
|
@ -29,6 +29,7 @@
|
||||||
"html-to-image": "^1.11.11",
|
"html-to-image": "^1.11.11",
|
||||||
"katex": "^0.16.4",
|
"katex": "^0.16.4",
|
||||||
"markdown-it": "^13.0.1",
|
"markdown-it": "^13.0.1",
|
||||||
|
"mermaid-it-markdown": "^1.0.8",
|
||||||
"naive-ui": "^2.34.3",
|
"naive-ui": "^2.34.3",
|
||||||
"pinia": "^2.0.33",
|
"pinia": "^2.0.33",
|
||||||
"vue": "^3.2.47",
|
"vue": "^3.2.47",
|
||||||
|
|
1212
pnpm-lock.yaml
1212
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
@ -1,8 +1,9 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed, onMounted, onUnmounted, onUpdated, ref } from 'vue'
|
import { computed, onMounted, onUnmounted, onUpdated, ref } from 'vue'
|
||||||
import MarkdownIt from 'markdown-it'
|
import MarkdownIt from 'markdown-it'
|
||||||
import mdKatex from '@vscode/markdown-it-katex'
|
import MdKatex from '@vscode/markdown-it-katex'
|
||||||
import mila from 'markdown-it-link-attributes'
|
import MdLinkAttributes from 'markdown-it-link-attributes'
|
||||||
|
import MdMermaid from 'mermaid-it-markdown'
|
||||||
import hljs from 'highlight.js'
|
import hljs from 'highlight.js'
|
||||||
import { useBasicLayout } from '@/hooks/useBasicLayout'
|
import { useBasicLayout } from '@/hooks/useBasicLayout'
|
||||||
import { t } from '@/locales'
|
import { t } from '@/locales'
|
||||||
|
@ -35,8 +36,7 @@ const mdi = new MarkdownIt({
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
mdi.use(mila, { attrs: { target: '_blank', rel: 'noopener' } })
|
mdi.use(MdLinkAttributes, { attrs: { target: '_blank', rel: 'noopener' } }).use(MdKatex).use(MdMermaid)
|
||||||
mdi.use(mdKatex)
|
|
||||||
|
|
||||||
const wrapClass = computed(() => {
|
const wrapClass = computed(() => {
|
||||||
return [
|
return [
|
||||||
|
@ -85,7 +85,7 @@ function removeCopyEvents() {
|
||||||
if (textRef.value) {
|
if (textRef.value) {
|
||||||
const copyBtn = textRef.value.querySelectorAll('.code-block-header__copy')
|
const copyBtn = textRef.value.querySelectorAll('.code-block-header__copy')
|
||||||
copyBtn.forEach((btn) => {
|
copyBtn.forEach((btn) => {
|
||||||
btn.removeEventListener('click', () => {})
|
btn.removeEventListener('click', () => { })
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -57,6 +57,14 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Mermaid
|
||||||
|
div[id^='mermaid-container'] {
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow-x: auto !important;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #e5e5e5;
|
||||||
|
}
|
||||||
|
|
||||||
&.markdown-body-generate>dd:last-child:after,
|
&.markdown-body-generate>dd:last-child:after,
|
||||||
&.markdown-body-generate>dl:last-child:after,
|
&.markdown-body-generate>dl:last-child:after,
|
||||||
|
|
Loading…
Reference in New Issue