diff --git a/README.md b/README.md index 1fc5fc2..f23e882 100644 --- a/README.md +++ b/README.md @@ -113,6 +113,19 @@ stateDiagram ``` +or + +
+::: mermaid
+stateDiagram
+    [*] --> First
+    state First {
+        [*] --> second
+        second --> [*]
+    }
+:::
+
+ OUTPUT ![mermaid](images/mermaid.png) diff --git a/extension.js b/extension.js index 23978ef..45578ec 100644 --- a/extension.js +++ b/extension.js @@ -253,6 +253,48 @@ function convertMarkdownToHtml(filename, type, text) { // markdown-it-container // https://github.com/markdown-it/markdown-it-container + + const pluginKeyword = 'mermaid'; + const tokenTypeInline = 'inline'; + const ttContainerOpen = 'container_' + pluginKeyword + '_open'; + const ttContainerClose = 'container_' + pluginKeyword + '_close'; + const empty = []; + + md.use(require('markdown-it-container'), pluginKeyword, { + validate: (info) => { + return info.trim() === pluginKeyword; + }, + + render: (tokens, idx) => { + var token = tokens[idx]; + + var src = ''; + if (token.type === ttContainerOpen) { + for (var i = idx + 1; i < tokens.length; i++) { + var value = tokens[i] + if (value === undefined || value.type === ttContainerClose) { + break; + } + src += value.content; + if (value.block && value.nesting <= 0) { + src += '\n'; + } + // Clear these out so markdown-it doesn't try to render them + value.tag = ''; + value.type = tokenTypeInline; + value.content = ''; + value.children = empty; + } + } + + if (token.nesting === 1) { + return `
${md.utils.escapeHtml(src)}`; + } else { + return '
\n'; + } + } + }); + md.use(require('markdown-it-container'), '', { validate: function (name) { return name.trim().length; diff --git a/images/mermaid.png b/images/mermaid.png index c9f1cd8..f074419 100644 Binary files a/images/mermaid.png and b/images/mermaid.png differ diff --git a/test/suite/mermaid.md b/test/suite/mermaid.md index 04924dd..f9cd935 100644 --- a/test/suite/mermaid.md +++ b/test/suite/mermaid.md @@ -8,3 +8,12 @@ graph TD C -->|Two| E[iPhone] C -->|Three| F[Car] ``` + +::: mermaid +graph TD + A[Christmas] -->|Get money| B(Go shopping) + B --> C{Let me think} + C -->|One| D[Laptop] + C -->|Two| E[iPhone] + C -->|Three| F[Car] +:::