From 1d16a3fc710851e66ccde7a2af2e97bcc52f7cd1 Mon Sep 17 00:00:00 2001 From: NGPixel Date: Sun, 29 Mar 2020 20:54:39 -0400 Subject: [PATCH] feat: mermaid support for markdown --- client/components/editor/editor-markdown.vue | 22 +++ client/themes/default/components/page.vue | 7 + package.json | 1 + .../rendering/html-mermaid/renderer.js | 5 +- yarn.lock | 131 +++++++++++++++++- 5 files changed, 163 insertions(+), 3 deletions(-) diff --git a/client/components/editor/editor-markdown.vue b/client/components/editor/editor-markdown.vue index 6fa32288..20e52890 100644 --- a/client/components/editor/editor-markdown.vue +++ b/client/components/editor/editor-markdown.vue @@ -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 = `
${mermaid.render(`mermaid-id-${mermaidId}`, mermaidDef)}
` + 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, { diff --git a/client/themes/default/components/page.vue b/client/themes/default/components/page.vue index 0d6288ef..ea1f97b0 100644 --- a/client/themes/default/components/page.vue +++ b/client/themes/default/components/page.vue @@ -249,6 +249,7 @@