Switch to prismjs for highlighting.

website/_config.yml

@@ -51,9 +51,7 @@ filename_case: 0
 render_drafts: false
 post_asset_folder: false
 highlight:
-  enable: true
-  line_number: false
-  tab_replace:
+  enable: false
 
 # Category & Tag
 default_category: uncategorized
@@ -114,6 +112,11 @@ marked:
   # modifyAnchors: 1
   autolink: true
 
+prism_plugin:
+  mode: 'preprocess'
+  theme: 'tomorrow'
+  line_number: false
+
 feed:
   type: atom
   path: atom.xml

website/package-lock.json

@@ -2860,6 +2860,17 @@
         "restore-cursor": "^1.0.1"
       }
     },
+    "clipboard": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-1.7.1.tgz",
+      "integrity": "sha1-Ng1taUbpmnof7zleQrqStem1oWs=",
+      "optional": true,
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "cliui": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
@@ -3508,6 +3519,12 @@
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
+      "optional": true
+    },
     "delegates": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
@@ -5737,6 +5754,15 @@
         }
       }
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "optional": true,
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "graceful-fs": {
       "version": "4.1.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
@@ -5878,6 +5904,11 @@
         "sntp": "1.x.x"
       }
     },
+    "he": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz",
+      "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0="
+    },
     "header-case": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/header-case/-/header-case-1.0.1.tgz",
@@ -7951,6 +7982,14 @@
         "which": "^1.3.0"
       }
     },
+    "node-prismjs": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/node-prismjs/-/node-prismjs-0.1.1.tgz",
+      "integrity": "sha512-7TrcjtiF9XFemrdZ9sMliEkOx4IzRWspZGu938YF+9crjfxwaLhlbRpY9ulvxfVJr6ZrEuZ/HvN/uz5LJvSafQ==",
+      "requires": {
+        "prismjs": "~1.6.0"
+      }
+    },
     "node-sass": {
       "version": "4.9.0",
       "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.9.0.tgz",
@@ -9708,6 +9747,14 @@
       "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
       "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE="
     },
+    "prismjs": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.6.0.tgz",
+      "integrity": "sha1-EY2V+3pm26InLjQ7NF9SNmWds2U=",
+      "requires": {
+        "clipboard": "^1.5.5"
+      }
+    },
     "private": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@@ -10419,6 +10466,12 @@
         }
       }
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
+      "optional": true
+    },
     "semver": {
       "version": "5.4.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.4.1.tgz",
@@ -11232,6 +11285,12 @@
         "process": "~0.11.0"
       }
     },
+    "tiny-emitter": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.0.2.tgz",
+      "integrity": "sha512-2NM0auVBGft5tee/OxP4PI3d8WItkDM+fPnaRAVo6xTDI2knbz9eC5ArWGqtGlYqiH3RU5yMpdyTTO7MguC4ow==",
+      "optional": true
+    },
     "tiny-lr": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/tiny-lr/-/tiny-lr-0.2.1.tgz",

website/package.json

@@ -8,6 +8,7 @@
   "dependencies": {
     "autoprefixer": "^7.2.6",
     "cssnano": "^3.10.0",
+    "he": "^1.1.1",
     "hexo": "^3.7.1",
     "hexo-browsersync": "^0.3.0",
     "hexo-deployer-git": "^0.3.1",
@@ -26,6 +27,7 @@
     "hexo-util": "^0.6.3",
     "js-yaml": "^3.11.0",
     "mkdirp": "0.5.1",
+    "node-prismjs": "^0.1.1",
     "postcss-inline-svg": "^3.1.1"
   },
   "devDependencies": {

website/scripts/highlight.js

@@ -0,0 +1,68 @@
+/* global hexo */
+const Prism = require('node-prismjs')
+const { decode } = require('he')
+const { promisify } = require('util')
+const readFile = promisify(require('fs').readFile)
+const path = require('path')
+
+const regex = /<pre><code class="(.*)?">([\s\S]*?)<\/code><\/pre>/igm
+const captionRegex = /<p><code>(?![\s\S]*<code)(.*?)\s(.*?)\n([\s\S]*)<\/code><\/p>/igm
+
+/**
+ * Code transform for prism plugin.
+ * @param {Object} data
+ * @return {Object}
+ */
+function prismify (data) {
+  // Patch for caption support
+  if (captionRegex.test(data.content)) {
+    // Attempt to parse the code
+    data.content = data.content.replace(captionRegex, (origin, lang, caption, code) => {
+      if (!lang || !caption || !code) return origin
+      return `<figcaption>${caption}</figcaption><pre><code class="${lang}">${code}</code></pre>`
+    })
+  }
+
+  function replace (lang, code) {
+    const startTag = `<figure class="highlight ${lang}"><table><tr><td class="code"><pre>`
+    const endTag = `</pre></td></tr></table></figure>`
+    code = decode(code)
+    let parsedCode = ''
+    if (Prism.languages[lang]) {
+      parsedCode = Prism.highlight(code, Prism.languages[lang])
+    } else {
+      parsedCode = code
+    }
+
+    return startTag + parsedCode + endTag
+  }
+
+  data.content = data.content.replace(regex, (origin, lang, code) => replace(lang, code))
+
+  return data
+}
+
+function code (args, content) {
+  let lang = ''
+  if (args[0].startsWith('lang:')) {
+    lang = args.shift().replace(/^lang:/, '')
+  }
+
+  return `<pre><code class="${lang}">${content}</code></pre>`
+}
+
+function includeCode (args) {
+  let lang = ''
+  if (args[0].startsWith('lang:')) {
+    lang = args.shift().replace(/^lang:/, '')
+  }
+
+  const file = path.join(hexo.source_dir, hexo.config.code_dir, args.join(' '))
+  return readFile(file, 'utf8')
+    .then((code) => code.trim())
+    .then((code) => `<pre><code class="${lang}">${code}</code></pre>`)
+}
+
+hexo.extend.filter.register('after_post_render', prismify)
+hexo.extend.tag.register('codeblock', code, true)
+hexo.extend.tag.register('include_code', includeCode, { async: true })

website/themes/uppy/source/css/_syntax.scss

@@ -4,101 +4,20 @@
 
 pre {
   color: #525252;
-
-  .function .keyword,
-  .constant {
-    color: #0092db;
-  }
-
-  .line {
-    min-height: 1em;
-  }
-
-  .keyword,
-  .attribute {
-    color: #e96900;
-  }
-
-  .number,
-  .literal {
-    color: #AE81FF;
-  }
-
-  .tag,
-  .tag .title,
-  .change,
-  .winutils,
-  .flow,
-  .lisp .title,
-  .clojure .built_in,
-  .nginx .title,
-  .tex .special {
-    color: #2973b7;
-  }
-
-  .class .title {
-    color: #2973b7;
-  }
-
-  .symbol,
-  .symbol .string,
-  .value,
-  .regexp {
-    color: $color-green;
-  }
-
-  .title {
-    color: #A6E22E;
-  }
-
-  .tag .value,
-  .string,
-  .subst,
-  .haskell .type,
-  .preprocessor,
-  .ruby .class .parent,
-  .built_in,
-  .sql .aggregate,
-  .django .template_tag,
-  .django .variable,
-  .smalltalk .class,
-  .javadoc,
-  .django .filter .argument,
-  .smalltalk .localvars,
-  .smalltalk .array,
-  .attr_selector,
-  .pseudo,
-  .addition,
-  .stream,
-  .envvar,
-  .apache .tag,
-  .apache .cbracket,
-  .tex .command,
-  .prompt {
-    color: $color-green;
-  }
-
-  .comment,
-  .java .annotation,
-  .python .decorator,
-  .template_comment,
-  .pi,
-  .doctype,
-  .deletion,
-  .shebang,
-  .apache .sqbracket,
-  .tex .formula {
-    color: #b3b3b3;
-  }
-
-  .coffeescript .javascript,
-  .javascript .xml,
-  .tex .formula,
-  .xml .javascript,
-  .xml .vbscript,
-  .xml .css,
-  .xml .cdata {
-    opacity: 0.5
-  }
-
+  // background-color: #f8f8f8 !important;
+  // font-size: .8em !important;
+  // .token.function, .token.punctuation { color: inherit; }
+
+  // Generic
+  .token.comment { color: #b3b3b3; }
+
+  // JS
+  .token.keyword { color: #e96900; }
+  .token.number, .token.boolean { color: #AE81FF; }
+  .token.class-name { color: #2973b7; }
+  .token.string { color: $color-green; }
+
+  // HTML
+  .token.tag { color: #2973b7; }
+  .token.attr-value { color: $color-green; }
 }