refactor: use Prism.js for highlight

package.json

@@ -59,9 +59,9 @@
   "dependencies": {
     "es6-promise": "^4.0.0",
     "front-matter": "^2.1.0",
-    "highlight.js": "^9.7.0",
     "marked": "^0.3.6",
     "normalize.css": "^5.0.0",
+    "prismjs": "^1.5.1",
     "timeago.js": "^2.0.2",
     "vue": "^2.0.1",
     "vue-resource": "^1.0.0",

src/style/index.styl

@@ -1,4 +1,5 @@
 @import '~normalize.css'
+@import '~prismjs/themes/prism.css'
 
 //
 // variable
@@ -118,22 +119,16 @@ a
   color metaColor
 
 pre
-  background codeBgColor
+  background codeBgColor !important
   padding 16px
   overflow-x auto
   white-space pre
 
 code
   background codeBgColor
-  font-family monospaceFontFamily
+  font-family monospaceFontFamily !important
 
 blockquote
   margin 0
   padding 0 16px
   border-left 4px solid #ddd
-
-//
-// highlight.js
-// -----------------------------------------
-
-@import '~highlight.js/styles/github.css'

src/views/Post.vue

@@ -14,12 +14,14 @@
   import api from '../api'
   import conf from '../conf.json'
   import marked from 'marked'
-  import hljs from 'highlight.js'
+  import Prism from 'prismjs'
   import fm from 'front-matter'
 
+  // https://github.com/chjj/marked#options-1
   marked.setOptions({
-    highlight(code) {
-      return hljs.highlightAuto(code).value
+    highlight(code, lang) {
+      // http://prismjs.com/extending.html#api
+      return Prism.highlight(code, Prism.languages[lang] || Prism.languages.javascript)
     },
     breaks: true,
     gfm: true
@@ -38,7 +40,7 @@
 
     computed: {
       htmlFromMarkdown() {
-        return marked(fm(this.content).body)
+        return marked(this.content)
       }
     },
 
@@ -50,13 +52,13 @@
       loadPost () {
         api.getDetail(this.$route.params.hash)
           .then(text => {
-            // parse front-matter
+            // Parse front-matter
             // https://github.com/jxson/front-matter#fmstring
             const content = fm(text)
             this.content = content.body
             this.title = content.attributes.title
             this.date = content.attributes.date
-            // set window title
+            // Set window title
             window.document.title = `${this.title} - ${conf.blogTitle}`
           })
           .catch(() => { /* TODO */ })