diff options
author | Cheng-Han, Wu | 2016-03-04 23:26:27 +0800 |
---|---|---|
committer | Cheng-Han, Wu | 2016-03-04 23:26:27 +0800 |
commit | b49d4e22616d7ac2a60db08dc69fdaf9b973cb04 (patch) | |
tree | e8b8c440036c6fedddf731b78a747e3a5c2eff4c /public/js | |
parent | c43f9784b4e0ed7299a215f0e3f1e4fce296780f (diff) |
Support mermaid in code block diagram and updated all diagram rendering method and styles
Diffstat (limited to '')
-rw-r--r-- | public/js/extra.js | 56 | ||||
-rw-r--r-- | public/js/index.js | 2 |
2 files changed, 49 insertions, 9 deletions
diff --git a/public/js/extra.js b/public/js/extra.js index 1752eb5b..dc3eac3e 100644 --- a/public/js/extra.js +++ b/public/js/extra.js @@ -220,11 +220,16 @@ function finishView(view) { var sequences = view.find(".sequence-diagram.raw").removeClass("raw"); sequences.each(function (key, value) { try { - var sequence = $(value); + var $value = $(value); + var $ele = $(value).parent().parent(); + + var sequence = $value; sequence.sequenceDiagram({ theme: 'simple' }); - sequence.parent().parent().replaceWith(sequence); + + $ele.addClass('sequence-diagram'); + $value.children().unwrap().unwrap(); } catch (err) { console.warn(err); } @@ -233,15 +238,20 @@ function finishView(view) { var flow = view.find(".flow-chart.raw").removeClass("raw"); flow.each(function (key, value) { try { - var chart = flowchart.parse($(value).text()); - $(value).html(''); + var $value = $(value); + var $ele = $(value).parent().parent(); + + var chart = flowchart.parse($value.text()); + $value.html(''); chart.drawSVG(value, { 'line-width': 2, 'fill': 'none', 'font-size': '16px', 'font-family': "'Andale Mono', monospace" }); - $(value).parent().parent().replaceWith(value); + + $ele.addClass('flow-chart'); + $value.children().unwrap().unwrap(); } catch (err) { console.warn(err); } @@ -250,9 +260,37 @@ function finishView(view) { var graphvizs = view.find(".graphviz.raw").removeClass("raw"); graphvizs.each(function (key, value) { try { - var graphviz = Viz($(value).text()); - $(value).html(graphviz); - $(value).parent().parent().replaceWith(value); + var $value = $(value); + var $ele = $(value).parent().parent(); + + var graphviz = Viz($value.text()); + $value.html(graphviz); + + $ele.addClass('graphviz'); + $value.children().unwrap().unwrap(); + } catch (err) { + console.warn(err); + } + }); + //mermaid + var mermaids = view.find(".mermaid.raw").removeClass("raw"); + mermaids.each(function (key, value) { + try { + var $value = $(value); + var $ele = $(value).parent().parent(); + + var mermaidError = null; + mermaid.parseError = function (err, hash) { + mermaidError = err; + }; + + if (mermaidAPI.parse($value.text())) { + $ele.addClass('mermaid'); + $ele.html($value.text()); + mermaid.init(undefined, $ele); + } else { + console.warn(mermaidError); + } } catch (err) { console.warn(err); } @@ -633,6 +671,8 @@ function highlightRender(code, lang) { return '<div class="flow-chart raw">' + code + '</div>'; } else if (lang == 'graphviz') { return '<div class="graphviz raw">' + code + '</div>'; + } else if (lang == 'mermaid') { + return '<div class="mermaid raw">' + code + '</div>'; } var reallang = lang.replace(/\=$|\=\d+$|\=\+$/, ''); var languages = hljs.listLanguages(); diff --git a/public/js/index.js b/public/js/index.js index fd85d6db..4625af05 100644 --- a/public/js/index.js +++ b/public/js/index.js @@ -56,7 +56,7 @@ var cursorMenuThrottle = 100; var cursorActivityDebounce = 50; var cursorAnimatePeriod = 100; var supportCodeModes = ['javascript', 'htmlmixed', 'htmlembedded', 'css', 'xml', 'clike', 'clojure', 'ruby', 'python', 'shell', 'php', 'sql', 'coffeescript', 'yaml', 'jade', 'lua', 'cmake', 'nginx', 'perl', 'sass', 'r', 'dockerfile']; -var supportCharts = ['sequence', 'flow', 'graphviz']; +var supportCharts = ['sequence', 'flow', 'graphviz', 'mermaid']; var supportHeaders = [ { text: '# h1', |