flowchart: support both flow and flowchart as the language

src/resources/hoedown.js

@@ -32,7 +32,9 @@ var updateHtml = function(html) {
                     --i;
                     continue;
                 }
-            } else if (VEnableFlowchart && code.classList.contains('language-flowchart')) {
+            } else if (VEnableFlowchart
+                       && (code.classList.contains('language-flowchart')
+                           || code.classList.contains('language-flow'))) {
                 // Flowchart code block.
                 if (renderFlowchartOne(code)) {
                     // replaceChild() will decrease codes.length.

src/resources/markdown-it.js

@@ -44,10 +44,7 @@ var mdit = window.markdownit({
     typographer: true,
     langPrefix: 'lang-',
     highlight: function(str, lang) {
-        if (lang
+        if (lang && !specialCodeBlock(lang)) {
-            && (!VEnableMathjax || lang != 'mathjax')
-            && (!VEnableMermaid || lang != 'mermaid')
-            && (!VEnableFlowchart || lang != 'flowchart')) {
             if (hljs.getLanguage(lang)) {
                 return hljs.highlight(lang, str, true).value;
             } else {
@@ -110,7 +107,7 @@ var updateText = function(text) {
     handleToc(needToc);
     insertImageCaption();
     renderMermaid('lang-mermaid');
-    renderFlowchart('lang-flowchart');
+    renderFlowchart(['lang-flowchart', 'lang-flow']);
     addClassToCodeBlock();
     renderCodeBlockLineNumber();
 

src/resources/markdown_template.js

@@ -543,7 +543,7 @@ var renderMermaidOne = function(code) {
 var flowchartIdx = 0;
 
 // @className, the class name of the flowchart code block, such as 'lang-flowchart'.
-var renderFlowchart = function(className) {
+var renderFlowchart = function(classNames) {
     if (!VEnableFlowchart) {
         return;
     }
@@ -552,7 +552,15 @@ var renderFlowchart = function(className) {
     flowchartIdx = 0;
     for (var i = 0; i < codes.length; ++i) {
         var code = codes[i];
-        if (code.classList.contains(className)) {
+        var matched = false;
+        for (var j = 0; j < classNames.length; ++j) {
+            if (code.classList.contains(classNames[j])) {
+                matched = true;
+                break;
+            }
+        }
+
+        if (matched) {
             if (renderFlowchartOne(code, flowchartIdx)) {
                 // replaceChild() will decrease codes.length.
                 --i;
@@ -1157,3 +1165,10 @@ var calculateWordCount = function() {
 
     content.updateWordCountInfo(wc, cns, cc);
 };
+
+// Whether it is a special code block, such as MathJax, Mermaid, or Flowchart.
+var specialCodeBlock = function(lang) {
+    return (VEnableMathjax && lang == 'mathjax')
+           || (VEnableMermaid && lang == 'mermaid')
+           || (VEnableFlowchart && (lang == 'flowchart' || lang == 'flow'));
+};

src/resources/marked.js

@@ -17,10 +17,7 @@ renderer.heading = function(text, level) {
 // Highlight.js to highlight code block
 marked.setOptions({
     highlight: function(code, lang) {
-        if (lang
+        if (lang && !specialCodeBlock(lang)) {
-            && (!VEnableMathjax || lang != 'mathjax')
-            && (!VEnableMermaid || lang != 'mermaid')
-            && (!VEnableFlowchart || lang != 'flowchart')) {
             if (hljs.getLanguage(lang)) {
                 return hljs.highlight(lang, code, true).value;
             } else {
@@ -59,7 +56,7 @@ var updateText = function(text) {
     handleToc(needToc);
     insertImageCaption();
     renderMermaid('lang-mermaid');
-    renderFlowchart('lang-flowchart');
+    renderFlowchart(['lang-flowchart', 'lang-flow']);
     addClassToCodeBlock();
     renderCodeBlockLineNumber();
 

src/resources/showdown.js

@@ -57,7 +57,9 @@ var highlightCodeBlocks = function(doc, enableMermaid, enableFlowchart, enableMa
             if (enableMermaid && code.classList.contains('language-mermaid')) {
                 // Mermaid code block.
                 continue;
-            } else if (enableFlowchart && code.classList.contains('language-flowchart')) {
+            } else if (enableFlowchart
+                       && (code.classList.contains('language-flowchart')
+                           || code.classList.contains('language-flow'))) {
                 // Flowchart code block.
                 continue;
             } else if (enableMathJax && code.classList.contains('language-mathjax')) {
@@ -84,7 +86,7 @@ var updateText = function(text) {
     insertImageCaption();
     highlightCodeBlocks(document, VEnableMermaid, VEnableFlowchart, VEnableMathjax);
     renderMermaid('language-mermaid');
-    renderFlowchart('language-flowchart');
+    renderFlowchart(['language-flowchart', 'language-flow']);
     addClassToCodeBlock();
     renderCodeBlockLineNumber();