From 578ea577f0ae81987f21b82770b888a67fea06d8 Mon Sep 17 00:00:00 2001
From: Nicolas Giard <github@ngpixel.com>
Date: Sun, 16 Sep 2018 00:35:03 -0400
Subject: [PATCH] feat: html code highlighter

---
 client/themes/default/scss/app.scss           | 113 +++++++++++++++++-
 package.json                                  |   1 +
 server/models/pages.js                        |  14 ++-
 .../rendering/html-asciinema/renderer.js      |   6 +-
 .../rendering/html-blockquotes/renderer.js    |   6 +-
 .../html-codehighlighter/renderer.js          |  17 +++
 .../modules/rendering/html-core/renderer.js   |  16 ++-
 .../modules/rendering/html-mathjax/mathjax.js |   6 +-
 .../html-mediaplayers/definition.yml          |   2 +-
 .../rendering/html-mediaplayers/renderer.js   |   6 +-
 .../rendering/html-mermaid/renderer.js        |   6 +-
 .../rendering/html-plantuml/renderer.js       |   6 +-
 .../rendering/html-security/renderer.js       |   6 +-
 .../rendering/markdown-core/renderer.js       |   3 +-
 yarn.lock                                     |   4 +
 15 files changed, 190 insertions(+), 22 deletions(-)
 create mode 100644 server/modules/rendering/html-codehighlighter/renderer.js

diff --git a/client/themes/default/scss/app.scss b/client/themes/default/scss/app.scss
index 6fb1819d..b515e3e0 100644
--- a/client/themes/default/scss/app.scss
+++ b/client/themes/default/scss/app.scss
@@ -4,9 +4,9 @@
   color: mc('grey', '800');
 
   h1 {
-    padding-left: 16px;
+    padding-left: 24px;
     color: mc('blue', '800');
-    margin-top: 16px;
+    margin-top: 1rem;
     position: relative;
 
     &::after {
@@ -19,12 +19,12 @@
       background: linear-gradient(to right, mc('theme', 'primary'), rgba(mc('theme', 'primary'), 0));
     }
 
-    & + h2 {
+    & + h2, & + h3 {
       margin-top: 8px;
     }
   }
   h2 {
-    margin-left: 16px;
+    margin-left: 24px;
     padding: 8px 0 0 0;
     color: mc('grey', '800');
     position: relative;
@@ -38,11 +38,114 @@
       height: 1px;
       background: linear-gradient(to right, mc('grey', '700'), rgba(mc('grey', '700'), 0));
     }
+
+    & + h3 {
+      margin-top: 8px;
+    }
+  }
+  h3 {
+    margin-left: 24px;
+    padding: 8px 0 0 0;
+    color: mc('grey', '700');
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      background: linear-gradient(to right, mc('grey', '500'), rgba(mc('grey', '500'), 0));
+    }
   }
 
   p {
-    padding: 16px 16px 0 16px;
+    padding: 1rem 24px 0 24px;
     margin: 0;
     text-align: justify;
   }
+
+  code {
+    background-color: transparent;
+    font-family: 'Source Code Pro', monospace;
+    font-weight: normal;
+    font-size: 1rem;
+
+    &::before, &::after {
+      display: none;
+    }
+  }
+
+  .hljs{
+    display: block;
+    overflow-x: auto;
+    padding: 1rem;
+    background: #232323;
+    color: #e6e1dc;
+    margin: 1rem 24px;
+    border-radius: .5rem;
+  }
+  .hljs-comment,.hljs-quote{
+      color:#bc9458;
+      font-style:italic
+  }
+  .hljs-keyword,.hljs-selector-tag{
+      color:#c26230
+  }
+  .hljs-string,.hljs-number,.hljs-regexp,.hljs-variable,.hljs-template-variable{
+      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
+  }
+
 }
diff --git a/package.json b/package.json
index 92ab0e3a..59649010 100644
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
     "graphql": "14.0.2",
     "graphql-list-fields": "2.0.2",
     "graphql-tools": "3.1.1",
+    "highlight.js": "9.12.0",
     "i18next": "11.7.0",
     "i18next-express-middleware": "1.3.2",
     "i18next-localstorage-cache": "1.1.1",
diff --git a/server/models/pages.js b/server/models/pages.js
index 8ceecb42..e933ea62 100644
--- a/server/models/pages.js
+++ b/server/models/pages.js
@@ -129,7 +129,12 @@ module.exports = class Page extends Model {
       publishStartDate: opts.publishStartDate,
       title: opts.title
     })
-    const page = await WIKI.models.pages.getPageFromDb(opts)
+    const page = await WIKI.models.pages.getPageFromDb({
+      path: opts.path,
+      locale: opts.locale,
+      userId: opts.authorId,
+      isPrivate: opts.isPrivate
+    })
     await WIKI.models.pages.renderPage(page)
     await WIKI.models.storage.pageEvent({
       event: 'created',
@@ -153,7 +158,12 @@ module.exports = class Page extends Model {
       publishStartDate: opts.publishStartDate,
       title: opts.title
     }).where('id', ogPage.id)
-    const page = await WIKI.models.pages.getPageFromDb(opts)
+    const page = await WIKI.models.pages.getPageFromDb({
+      path: ogPage.path,
+      locale: ogPage.localeCode,
+      userId: ogPage.authorId,
+      isPrivate: ogPage.isPrivate
+    })
     await WIKI.models.pages.renderPage(page)
     await WIKI.models.storage.pageEvent({
       event: 'updated',
diff --git a/server/modules/rendering/html-asciinema/renderer.js b/server/modules/rendering/html-asciinema/renderer.js
index 4ba52ba2..67c19c89 100644
--- a/server/modules/rendering/html-asciinema/renderer.js
+++ b/server/modules/rendering/html-asciinema/renderer.js
@@ -1 +1,5 @@
-module.exports = {}
+module.exports = {
+  init($, config) {
+
+  }
+}
diff --git a/server/modules/rendering/html-blockquotes/renderer.js b/server/modules/rendering/html-blockquotes/renderer.js
index 4ba52ba2..67c19c89 100644
--- a/server/modules/rendering/html-blockquotes/renderer.js
+++ b/server/modules/rendering/html-blockquotes/renderer.js
@@ -1 +1,5 @@
-module.exports = {}
+module.exports = {
+  init($, config) {
+
+  }
+}
diff --git a/server/modules/rendering/html-codehighlighter/renderer.js b/server/modules/rendering/html-codehighlighter/renderer.js
new file mode 100644
index 00000000..e2d9ce5e
--- /dev/null
+++ b/server/modules/rendering/html-codehighlighter/renderer.js
@@ -0,0 +1,17 @@
+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 result = hljs.highlightAuto($(elm).text())
+        $(elm).html(result.value)
+        $(elm).attr('lang', result.language)
+      }
+      $(elm).parent().addClass('hljs')
+    })
+  }
+}
diff --git a/server/modules/rendering/html-core/renderer.js b/server/modules/rendering/html-core/renderer.js
index cf192427..8bfad0d0 100644
--- a/server/modules/rendering/html-core/renderer.js
+++ b/server/modules/rendering/html-core/renderer.js
@@ -1,5 +1,19 @@
+const _ = require('lodash')
+const cheerio = require('cheerio')
+
 module.exports = {
   async render() {
-    return this.input
+    const $ = cheerio.load(this.input)
+
+    if ($.root().children().length < 1) {
+      return ''
+    }
+
+    for (let child of this.children) {
+      const renderer = require(`../${_.kebabCase(child.key)}/renderer.js`)
+      renderer.init($, child.config)
+    }
+
+    return $.html()
   }
 }
diff --git a/server/modules/rendering/html-mathjax/mathjax.js b/server/modules/rendering/html-mathjax/mathjax.js
index 8cea97f3..5c9083c3 100644
--- a/server/modules/rendering/html-mathjax/mathjax.js
+++ b/server/modules/rendering/html-mathjax/mathjax.js
@@ -23,11 +23,7 @@ const mathRegex = [
 ]
 
 module.exports = {
-  key: 'common/mathjax',
-  title: 'Mathjax',
-  dependsOn: [],
-  props: [],
-  init (conf) {
+  init ($, config) {
     mathjax.config({
       MathJax: {
         jax: ['input/TeX', 'input/MathML', 'output/SVG'],
diff --git a/server/modules/rendering/html-mediaplayers/definition.yml b/server/modules/rendering/html-mediaplayers/definition.yml
index 002e8791..9d123d7d 100644
--- a/server/modules/rendering/html-mediaplayers/definition.yml
+++ b/server/modules/rendering/html-mediaplayers/definition.yml
@@ -1,4 +1,4 @@
-key: htmlMedia
+key: htmlMediaplayers
 title: Media Players
 description: Embed players such as Youtube, Vimeo, Soundcloud, etc.
 author: requarks.io
diff --git a/server/modules/rendering/html-mediaplayers/renderer.js b/server/modules/rendering/html-mediaplayers/renderer.js
index 4ba52ba2..67c19c89 100644
--- a/server/modules/rendering/html-mediaplayers/renderer.js
+++ b/server/modules/rendering/html-mediaplayers/renderer.js
@@ -1 +1,5 @@
-module.exports = {}
+module.exports = {
+  init($, config) {
+
+  }
+}
diff --git a/server/modules/rendering/html-mermaid/renderer.js b/server/modules/rendering/html-mermaid/renderer.js
index 4ba52ba2..67c19c89 100644
--- a/server/modules/rendering/html-mermaid/renderer.js
+++ b/server/modules/rendering/html-mermaid/renderer.js
@@ -1 +1,5 @@
-module.exports = {}
+module.exports = {
+  init($, config) {
+
+  }
+}
diff --git a/server/modules/rendering/html-plantuml/renderer.js b/server/modules/rendering/html-plantuml/renderer.js
index 4ba52ba2..67c19c89 100644
--- a/server/modules/rendering/html-plantuml/renderer.js
+++ b/server/modules/rendering/html-plantuml/renderer.js
@@ -1 +1,5 @@
-module.exports = {}
+module.exports = {
+  init($, config) {
+
+  }
+}
diff --git a/server/modules/rendering/html-security/renderer.js b/server/modules/rendering/html-security/renderer.js
index 4ba52ba2..67c19c89 100644
--- a/server/modules/rendering/html-security/renderer.js
+++ b/server/modules/rendering/html-security/renderer.js
@@ -1 +1,5 @@
-module.exports = {}
+module.exports = {
+  init($, config) {
+
+  }
+}
diff --git a/server/modules/rendering/markdown-core/renderer.js b/server/modules/rendering/markdown-core/renderer.js
index f6d4fa67..fe9ddb78 100644
--- a/server/modules/rendering/markdown-core/renderer.js
+++ b/server/modules/rendering/markdown-core/renderer.js
@@ -25,12 +25,11 @@ module.exports = {
       typographer: this.config.typographer,
       quotes: _.get(quoteStyles, this.config.quotes, quoteStyles.English),
       highlight(str, lang) {
-        return '<pre><code>' + _.escape(str) + '</code></pre>'
+        return `<pre><code lang="${lang}">${_.escape(str)}</code></pre>`
       }
     })
 
     for (let child of this.children) {
-      console.info(child)
       const renderer = require(`../${_.kebabCase(child.key)}/renderer.js`)
       renderer.init(mkdown, child.config)
     }
diff --git a/yarn.lock b/yarn.lock
index 29d3c6fd..42408186 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5753,6 +5753,10 @@ hex-color-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
 
+highlight.js@9.12.0:
+  version "9.12.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e"
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"