Improved code highlighting using codemirror

[website] / themes / bookstack / static / js / script.js

diff --git a/themes/bookstack/static/js/script.js b/themes/bookstack/static/js/script.js
index e5c7d2f588b65d039364518c25898ee2dc385c11..1650b5b653e353aec59f8823faf67930c58f8272 100644 (file)
--- a/themes/bookstack/static/js/script.js
+++ b/themes/bookstack/static/js/script.js
@@ -22,7 +22,7 @@ document.body.onclick = function(event) {
 
 
 // Handle video click to play
-let videos = document.querySelectorAll('video');
+var videos = document.querySelectorAll('video');
 for (var i = 0; i < videos.length; i++) {
     videos[i].addEventListener('click', videoClick)
 }
@@ -30,4 +30,36 @@ for (var i = 0; i < videos.length; i++) {
 function videoClick() {
     if (typeof InstallTrigger !== 'undefined') return;
     this.paused ? this.play() : this.pause();
-}
\ No newline at end of file
+}
+
+
+// Codemirror Setup
+
+var modeMap = {
+  'language-html': 'htmlmixed',
+  'language-bash': 'shell',
+  'language-js': 'javascript',
+  'language-shell': 'bash',
+  'language-nginx': 'nginx',
+  'language-apache': 'xml'
+};
+
+var codeBlocks = document.querySelectorAll('pre');
+for (var i = 0; i < codeBlocks.length; i++) {
+  var block = codeBlocks[i];
+  var codeElem = block.querySelector('code');
+  if (codeElem === null) continue;
+
+  var langClass = codeElem.className;
+  var mode = (typeof modeMap[langClass] !== 'undefined') ? modeMap[langClass] : 'htmlmixed';
+  var content = codeElem.textContent.trim();
+  CodeMirror(function(cmElem) {
+    block.parentNode.replaceChild(cmElem, block);
+  }, {
+    theme: 'base16-light',
+    lineNumbers: true,
+    mode: mode,
+    readOnly: true,
+    value: content
+  });
+}