feat: mermaid support for markdown
This commit is contained in:
@@ -222,6 +222,9 @@ import twemoji from 'twemoji'
|
||||
// Prism (Syntax Highlighting)
|
||||
import Prism from 'prismjs'
|
||||
|
||||
// Mermaid
|
||||
import mermaid from 'mermaid'
|
||||
|
||||
// Helpers
|
||||
import katexHelper from './common/katex'
|
||||
|
||||
@@ -331,6 +334,8 @@ md.renderer.rules.emoji = (token, idx) => {
|
||||
// Vue Component
|
||||
// ========================================
|
||||
|
||||
let mermaidId = 0
|
||||
|
||||
export default {
|
||||
components: {
|
||||
markdownHelp
|
||||
@@ -367,6 +372,7 @@ export default {
|
||||
previewShown (newValue, oldValue) {
|
||||
if (newValue && !oldValue) {
|
||||
this.$nextTick(() => {
|
||||
this.renderMermaidDiagrams()
|
||||
Prism.highlightAllUnder(this.$refs.editorPreview)
|
||||
Array.from(this.$refs.editorPreview.querySelectorAll('pre.line-numbers')).forEach(pre => pre.classList.add('prismjs'))
|
||||
})
|
||||
@@ -387,6 +393,7 @@ export default {
|
||||
this.$store.set('editor/content', newContent)
|
||||
this.previewHTML = md.render(newContent)
|
||||
this.$nextTick(() => {
|
||||
this.renderMermaidDiagrams()
|
||||
Prism.highlightAllUnder(this.$refs.editorPreview)
|
||||
Array.from(this.$refs.editorPreview.querySelectorAll('pre.line-numbers')).forEach(pre => pre.classList.add('prismjs'))
|
||||
this.scrollSync(this.cm)
|
||||
@@ -528,6 +535,15 @@ export default {
|
||||
this.$nextTick(() => {
|
||||
this.cm.refresh()
|
||||
})
|
||||
},
|
||||
renderMermaidDiagrams () {
|
||||
document.querySelectorAll('.editor-markdown-preview pre.line-numbers > code.language-mermaid').forEach(elm => {
|
||||
mermaidId++
|
||||
const mermaidDef = elm.innerText
|
||||
const mmElm = document.createElement('div')
|
||||
mmElm.innerHTML = `<div id="mermaid-id-${mermaidId}">${mermaid.render(`mermaid-id-${mermaidId}`, mermaidDef)}</div>`
|
||||
elm.parentElement.replaceWith(mmElm)
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@@ -537,6 +553,12 @@ export default {
|
||||
this.$store.set('editor/content', '# Header\nYour content here')
|
||||
}
|
||||
|
||||
// Initialize Mermaid API
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
theme: this.$vuetify.theme.dark ? `dark` : `default`
|
||||
})
|
||||
|
||||
// Initialize CodeMirror
|
||||
|
||||
this.cm = CodeMirror.fromTextArea(this.$refs.cm, {
|
||||
|
Reference in New Issue
Block a user