feat: code highlighting client-side

client/themes/default/components/app.vue

@@ -49,7 +49,7 @@
               .headline.grey--text.text--darken-3 {{title}}
               .caption.grey--text.text--darken-1 {{description}}
           v-divider
-          .contents
+          .contents(ref='container')
             slot(name='contents')
 
         v-flex(lg3, xl2, fill-height, v-if='$vuetify.breakpoint.lgAndUp')
@@ -111,6 +111,7 @@
 
 <script>
 import { StatusIndicator } from 'vue-status-indicator'
+import Prism from '@/libs/prism/prism.js'
 
 export default {
   components: {
@@ -206,6 +207,9 @@ export default {
       }
     }
   },
+  mounted () {
+    Prism.highlightAllUnder(this.$refs.container)
+  },
   methods: {
     toggleNavigation () {
       this.navOpen = !this.navOpen

client/themes/default/scss/app.scss

@@ -77,75 +77,25 @@
     }
   }
 
-  .hljs{
+  .prismjs{
-    display: block;
+    border: none;
-    overflow-x: auto;
+    border-radius: 5px;
-    padding: 1rem;
+    box-shadow: initial;
-    background: #232323;
+    background-color: mc('grey', '900');
-    color: #e6e1dc;
+    padding: 1rem 1rem 1rem 3rem;
     margin: 1rem 24px;
-    border-radius: .5rem;
+
-  }
+    > code {
-  .hljs-comment,.hljs-quote{
+      box-shadow: initial;
-      color:#bc9458;
+      display: block;
-      font-style:italic
+      font-size: .85rem;
-  }
+      font-family: 'Source Code Pro', monospace;
-  .hljs-keyword,.hljs-selector-tag{
+
-      color:#c26230
+      &:after, &:before {
-  }
+        content: initial;
-  .hljs-string,.hljs-number,.hljs-regexp,.hljs-variable,.hljs-template-variable{
+        letter-spacing: initial;
-      color:#a5c261
+      }
-  }
+    }
-  .hljs-subst{
-      color:#519f50
-  }
-  .hljs-tag,.hljs-name{
-      color:#e8bf6a
-  }
-  .hljs-type{
-      color:#da4939
-  }
-  .hljs-symbol,.hljs-bullet,.hljs-built_in,.hljs-builtin-name,.hljs-attr,.hljs-link{
-      color:#6d9cbe
-  }
-  .hljs-params{
-      color:#d0d0ff
-  }
-  .hljs-attribute{
-      color:#cda869
-  }
-  .hljs-meta{
-      color:#9b859d
-  }
-  .hljs-title,.hljs-section{
-      color:#ffc66d
-  }
-  .hljs-addition{
-      background-color:#144212;
-      color:#e6e1dc;
-      display:inline-block;
-      width:100%
-  }
-  .hljs-deletion{
-      background-color:#600;
-      color:#e6e1dc;
-      display:inline-block;
-      width:100%
-  }
-  .hljs-selector-class{
-      color:#9b703f
-  }
-  .hljs-selector-id{
-      color:#8b98ab
-  }
-  .hljs-emphasis{
-      font-style:italic
-  }
-  .hljs-strong{
-      font-weight:bold
-  }
-  .hljs-link{
-      text-decoration:underline
   }
 
 }

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

@@ -1,6 +1,6 @@
 key: htmlCodehighlighter
-title: Code Highlighting
+title: Code Highlighting Post-Processor
-description: Syntax highlighter for programming code
+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')
+      const codeClasses = $(elm).attr('class') || ''
-      if (lang) {
+      if (codeClasses.indexOf('language-') < 0) {
-        $(elm).html(hljs.highlight(lang, $(elm).text(), true).value)
-      } else {
         const result = hljs.highlightAuto($(elm).text())
-        $(elm).html(result.value)
+        $(elm).addClass('language-', result.language)
-        $(elm).attr('lang', 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
+title: Mathjax Preprocessor
-description: Pre-parse TeX blocks for Mathjax
+description: Prepare TeX blocks for Mathjax
 author: requarks.io
 icon: functions
 enabledDefault: false