diff --git a/package.json b/package.json
index 2fc667ec76..df2bf48da7 100644
--- a/package.json
+++ b/package.json
@@ -160,6 +160,7 @@
"markdown-it-ruby": "^0.1.1",
"markdown-it-sub": "~1.0.0",
"markdown-it-sup": "~1.0.0",
+ "markdown-it-diagrams": "~0.1.2",
"markdownlint": "^0.17.0",
"mathjax": "~2.7.5",
"mermaid": "~8.4.8",
diff --git a/public/js/extra.js b/public/js/extra.js
index dfc206b0aa..8bf445d820 100644
--- a/public/js/extra.js
+++ b/public/js/extra.js
@@ -23,6 +23,10 @@ import markdownitContainer from 'markdown-it-container'
/* Defined regex markdown it plugins */
import Plugin from 'markdown-it-regexp'
+/* Diagram suport for markdown */
+import {awaitRenderAvailable} from "markdown-it-diagrams"
+import {diagramPlugin} from "markdown-it-diagrams"
+
require('prismjs/themes/prism.css')
require('prismjs/components/prism-wiki')
require('prismjs/components/prism-haskell')
@@ -243,8 +247,6 @@ function replaceExtraTags (html) {
return html
}
-if (typeof window.mermaid !== 'undefined' && window.mermaid) window.mermaid.startOnLoad = false
-
// dynamic event or object binding here
export function finishView (view) {
// todo list
@@ -379,23 +381,6 @@ export function finishView (view) {
console.warn(err)
}
})
- // mermaid
- const mermaids = view.find('div.mermaid.raw').removeClass('raw')
- mermaids.each((key, value) => {
- try {
- var $value = $(value)
- const $ele = $(value).closest('pre')
-
- window.mermaid.parse($value.text())
- $ele.addClass('mermaid')
- $ele.html($value.text())
- window.mermaid.init(undefined, $ele)
- } catch (err) {
- $value.unwrap()
- $value.parent().append(`${escapeHTML(err.str)}
`)
- console.warn(err)
- }
- })
// abc.js
const abcs = view.find('div.abc.raw').removeClass('raw')
abcs.each((key, value) => {
@@ -1033,7 +1018,6 @@ const fenceCodeAlias = {
sequence: 'sequence-diagram',
flow: 'flow-chart',
graphviz: 'graphviz',
- mermaid: 'mermaid',
abc: 'abc',
vega: 'vega',
geo: 'geo'
@@ -1083,6 +1067,10 @@ export const md = markdownit('default', {
})
window.md = md
+md.awaitRenderAvailable = awaitRenderAvailable;
+// Doesn't work when we use the plugin from here, so store it for later use.
+// md.use(diagramPlugin)
+md.diagramPlugin = diagramPlugin
md.use(require('markdown-it-abbr'))
md.use(require('markdown-it-footnote'))
md.use(require('markdown-it-deflist'))
diff --git a/public/js/index.js b/public/js/index.js
index 5b2d8861cb..2e86f61471 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -102,7 +102,7 @@ var cursorActivityDebounce = 50
var cursorAnimatePeriod = 100
var supportContainers = ['success', 'info', 'warning', 'danger', 'spoiler']
var supportCodeModes = ['javascript', 'typescript', 'jsx', 'htmlmixed', 'htmlembedded', 'css', 'xml', 'clike', 'clojure', 'ruby', 'python', 'shell', 'php', 'sql', 'haskell', 'coffeescript', 'yaml', 'pug', 'lua', 'cmake', 'nginx', 'perl', 'sass', 'r', 'dockerfile', 'tiddlywiki', 'mediawiki', 'go', 'gherkin'].concat(hljs.listLanguages())
-var supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid', 'abc', 'plantuml', 'vega', 'geo']
+var supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid', 'abc', 'plantuml', 'vega', 'geo', 'bob']
var supportHeaders = [
{
text: '# h1',
@@ -2782,10 +2782,14 @@ var postUpdateEvent = null
function updateViewInner () {
if (appState.currentMode === modeType.edit || !isDirty) return
+ (async function() {
+ // Didn't work when we used it from extra.js, so we use it here instead
+ md.use(md.diagramPlugin)
var value = editor.getValue()
var lastMeta = md.meta
md.meta = {}
delete md.metaError
+ await md.awaitRenderAvailable();
var rendered = md.render(value)
if (md.meta.type && md.meta.type === 'slide') {
var slideOptions = {
@@ -2819,6 +2823,7 @@ function updateViewInner () {
if (result && lastResult && result.length !== lastResult.length) { updateDataAttrs(result, ui.area.markdown.children().toArray()) }
lastResult = $(result).clone()
}
+ })();
removeDOMEvents(ui.area.markdown)
finishView(ui.area.markdown)
autoLinkify(ui.area.markdown)
diff --git a/public/js/pretty.js b/public/js/pretty.js
index a5df0a4789..7e7b08b7f5 100644
--- a/public/js/pretty.js
+++ b/public/js/pretty.js
@@ -25,10 +25,14 @@ require('../css/site.css')
require('highlight.js/styles/github-gist.css')
const markdown = $('#doc.markdown-body')
+(async function() {
+// Didn't work when we used it from extra.js, so we use it here instead
+md.use(md.diagramPlugin)
const text = markdown.text()
const lastMeta = md.meta
md.meta = {}
delete md.metaError
+await md.awaitRenderAvailable();
let rendered = md.render(text)
if (md.meta.type && md.meta.type === 'slide') {
const slideOptions = {
@@ -69,6 +73,7 @@ smoothHashScroll()
window.createtime = window.lastchangeui.time.attr('data-createtime')
window.lastchangetime = window.lastchangeui.time.attr('data-updatetime')
updateLastChange()
+})();
const url = window.location.pathname
$('.ui-edit').attr('href', `${url}/edit`)
diff --git a/public/views/codimd/foot.ejs b/public/views/codimd/foot.ejs
index 243fa40ad6..e610601fa9 100644
--- a/public/views/codimd/foot.ejs
+++ b/public/views/codimd/foot.ejs
@@ -10,7 +10,6 @@
-
diff --git a/public/views/pretty.ejs b/public/views/pretty.ejs
index aa330e0f32..45e930c99d 100644
--- a/public/views/pretty.ejs
+++ b/public/views/pretty.ejs
@@ -83,7 +83,6 @@
-
diff --git a/public/views/slide.ejs b/public/views/slide.ejs
index 42b1165d49..e66e9ceffb 100644
--- a/public/views/slide.ejs
+++ b/public/views/slide.ejs
@@ -98,7 +98,6 @@
-