feat: code highlighting client-side

server/modules/rendering/html-codehighlighter/definition.yml

@@ -1,6 +1,6 @@
 key: htmlCodehighlighter
-title: Code Highlighting
-description: Syntax highlighter for programming code
+title: Code Highlighting Post-Processor
+description: Syntax detector for programming code
 author: requarks.io
 icon: palette
 enabledDefault: true

server/modules/rendering/html-codehighlighter/renderer.js

@@ -3,15 +3,12 @@ const hljs = require('highlight.js')
 module.exports = {
   async init($, config) {
     $('pre > code').each((idx, elm) => {
-      const lang = $(elm).attr('lang')
-      if (lang) {
-        $(elm).html(hljs.highlight(lang, $(elm).text(), true).value)
-      } else {
+      const codeClasses = $(elm).attr('class') || ''
+      if (codeClasses.indexOf('language-') < 0) {
         const result = hljs.highlightAuto($(elm).text())
-        $(elm).html(result.value)
-        $(elm).attr('lang', result.language)
+        $(elm).addClass('language-', result.language)
       }
-      $(elm).parent().addClass('hljs')
+      $(elm).parent().addClass('prismjs line-numbers')
     })
   }
 }

server/modules/rendering/markdown-core/renderer.js

@@ -25,7 +25,7 @@ module.exports = {
       typographer: this.config.typographer,
       quotes: _.get(quoteStyles, this.config.quotes, quoteStyles.English),
       highlight(str, lang) {
-        return `<pre><code lang="${lang}">${_.escape(str)}</code></pre>`
+        return `<pre><code class="language-${lang}">${_.escape(str)}</code></pre>`
       }
     })
 

server/modules/rendering/markdown-mathjax/definition.yml

@@ -1,6 +1,6 @@
 key: markdownMathjax
-title: Mathjax Pre-Processor
-description: Pre-parse TeX blocks for Mathjax
+title: Mathjax Preprocessor
+description: Prepare TeX blocks for Mathjax
 author: requarks.io
 icon: functions
 enabledDefault: false