Improve syntax highlighting performance by moving it to finish view

2 files changed, 32 insertions, 15 deletions

diff --git a/public/js/extra.js b/public/js/extra.js
index 6c2e2d4a..4a6c4a67 100644
--- a/public/js/extra.js
+++ b/public/js/extra.js
@@ -435,6 +435,33 @@ function finishView(view) {
                 height: '400px'
             });
         });
+    //syntax highlighting
+    view.find("pre.raw").removeClass("raw")
+        .each(function (key, value) {
+            var langDiv = $(value).find('code.hljs');
+            if (langDiv.length > 0) {
+                var reallang = langDiv[0].className.replace('hljs', '').trim();
+                var codeDiv = $(value).find('.code');
+                var code = "";
+                if (codeDiv.length > 0) code = codeDiv.html();
+                else code = langDiv.html();
+                code = md.utils.unescapeAll(code);
+                if (reallang == "tiddlywiki" || reallang == "mediawiki") {
+                    var result = {
+                        value: Prism.highlight(code, Prism.languages.wiki)
+                    };
+                } else {
+                    var languages = hljs.listLanguages();
+                    if (languages.indexOf(reallang) == -1) {
+                        var result = hljs.highlightAuto(code);
+                    } else {
+                        var result = hljs.highlight(reallang, code);
+                    }
+                }
+                if (codeDiv.length > 0) codeDiv.html(result.value);
+                else langDiv.html(result.value);
+            }
+        });
     //render title
     document.title = renderTitle(view);
 }
@@ -772,19 +799,9 @@ function highlightRender(code, lang) {
     } else if (lang == 'mermaid') {
         return '<div class="mermaid raw">' + code + '</div>';
     }
-    var reallang = lang.replace(/\=$|\=\d+$|\=\+$/, '');
-    if (reallang == "tiddlywiki" || reallang == "mediawiki") {
-        var result = {
-            value: Prism.highlight(code, Prism.languages.wiki)
-        };
-    } else {
-        var languages = hljs.listLanguages();
-        if (languages.indexOf(reallang) == -1) {
-            var result = hljs.highlightAuto(code);
-        } else {
-            var result = hljs.highlight(reallang, code);
-        }
-    }
+    var result = {
+        value: code
+    };
 	var showlinenumbers = /\=$|\=\d+$|\=\+$/.test(lang);
     if (showlinenumbers) {
 		var startnumber = 1;
@@ -878,7 +895,7 @@ md.renderer.rules.fence = function (tokens, idx, options, env, self) {
         return highlighted + '\n';
     }
 
-    return  '<pre><code' + self.renderAttrs(token) + '>'
+    return  '<pre class="raw"><code' + self.renderAttrs(token) + '>'
         + highlighted
         + '</code></pre>\n';
 };
diff --git a/public/js/syncscroll.js b/public/js/syncscroll.js
index 96663f77..32d3f7a3 100644
--- a/public/js/syncscroll.js
+++ b/public/js/syncscroll.js
@@ -75,7 +75,7 @@ md.renderer.rules.fence = function (tokens, idx, options, env, self) {
     if (tokens[idx].map && tokens[idx].level === 0) {
         var startline = tokens[idx].map[0] + 1;
         var endline = tokens[idx].map[1];
-        return '<pre class="part" data-startline="' + startline + '" data-endline="' + endline + '"><code' + self.renderAttrs(token) + '>'
+        return '<pre class="part raw" data-startline="' + startline + '" data-endline="' + endline + '"><code' + self.renderAttrs(token) + '>'
         + highlighted
         + '</code></pre>\n';
     }