Use highlight.js (#1968) (#1439)

* Use highlight.js for more semantics

* Update hexo version

* More tweaks

* Better formatting

* Fix wrong section seperation

Author: vuejs-jp-bot

_config.yml

@@ -39,6 +39,7 @@ highlight:
   enable: true
   line_number: false
   tab_replace:
+  hljs: true
 
 # Category & Tag
 default_category: uncategorized

themes/vue/source/css/_common.styl

@@ -74,49 +74,6 @@ input.button
     color: $light
     border-color: #f6f6f6
 
-.highlight
-  overflow-x: auto
-  background-color: $codebg
-  padding: .4em 0 0
-  line-height: 1.1em
-  border-radius: $radius
-  position: relative
-  table, tr, td
-    width: 100%
-    border-collapse: collapse
-    padding: 0
-    margin: 0
-  .gutter
-    width: 1.5em
-  .code
-    $code-line-height = 1.5em
-    pre
-      padding: 1.2em 1.4em
-      line-height: $code-line-height
-      margin: 0
-    .line
-      min-height: $code-line-height
-  &.html, &.js, &.bash, &.css
-    .code:before
-      position: absolute
-      top: 0
-      right: 0
-      color: #ccc
-      text-align: right
-      font-size: .75em
-      padding: 5px 10px 0
-      line-height: 15px
-      height: 15px
-      font-weight: 600
-  &.html .code:before
-    content: "HTML"
-  &.js .code:before
-    content: "JS"
-  &.bash .code:before
-    content: "Shell"
-  &.css .code:before
-    content: "CSS"
-
 #main
   position: relative
   z-index: 1

themes/vue/source/css/_syntax.styl

@@ -1,77 +1,117 @@
-.gutter pre
-  color: #999
-
 pre
+  border-radius: $radius
+  position: relative
+
+pre code
+  overflow-x: auto
   color: #525252
-  .function .keyword,
-  .constant
-    color: #0092db
-  .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: white
-  .symbol,
-  .symbol .string,
-  .value,
-  .regexp
-    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: $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
+  white-space: pre
+  padding: 1.2em 1.4em
+  line-height: 1.5em
+  font-size: 1em
+  display: block
+
+  .hljs
+    &-tag,
+    &-tag &-title,
+    &-change,
+    &-winutils,
+    &-flow,
+    &-tex &-special
+      color: #2973b7
+
+    &-symbol,
+    &-symbol &-string,
+    &-value,
+    &-regexp
+    &-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: $green
+
+    &-function &-keyword,
+    &-constant
+      color: #0092db
+
+    &-keyword,
+    &-attribute
+      color: #e96900
+
+    &-number,
+    &-literal
+      color: #ae81ff
+
+    &-class &-title
+      color: white
+
+    &-title
+      color: #a6e22e
+
+    &-tag &-value,
+    &-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
+
+  &.hljs
+    &.html, &.js, &.bash, &.css
+      &::before
+        font-family: $body-font
+        position: absolute
+        top: 0
+        right: 0
+        color: #ccc
+        text-align: right
+        font-size: .9em
+        padding: 5px 10px 0
+        line-height: 15px
+        height: 15px
+        font-weight: 600
+
+    &.html::before
+      content: "HTML"
+
+    &.js::before
+      content: "JS"
+
+    &.bash::before
+      content: "Shell"
+
+    &.css::before
+      content: "CSS"