feat: mermaid support for markdown

This commit is contained in:
NGPixel
2020-03-29 20:54:39 -04:00
parent 951ebb6b61
commit 1d16a3fc71
5 changed files with 163 additions and 3 deletions

View File

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