feat: markdown mermaid

This commit is contained in:
ChenZhoYu 2024-06-07 10:14:34 +08:00
parent e3ce91cfa1
commit a546d856d7
4 changed files with 1205 additions and 26 deletions

View File

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

File diff suppressed because it is too large Load Diff

View File

@ -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', () => { })
}) })
} }
} }

View File

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