Switch to Highlight.js

As discussed in #134
nevir · Sep 12, 2014 · dee763a · dee763a
1 parent 52c7497
commit dee763a
Show file tree

Hide file tree

Showing 7 changed files with 158 additions and 235 deletions.
diff --git a/lib/languages.coffee b/lib/languages.coffee
@@ -8,13 +8,15 @@ module.exports = LANGUAGES =
   C:
     nameMatchers:      ['.c', '.h']
     pygmentsLexer:     'c'
+    highlightJS:       'cpp'
     singleLineComment: ['//']
     ignorePrefix:      '}'
     foldPrefix:        '^'
 
   CSharp:
     nameMatchers:      ['.cs']
     pygmentsLexer:     'csharp'
+    highlightJS:       'cs'
     multiLineComment:  ['/*', '*', '*/']
     singleLineComment: ['//']
     ignorePrefix:      '}'
@@ -37,6 +39,7 @@ module.exports = LANGUAGES =
   CoffeeScript:
     nameMatchers:      ['.coffee', 'Cakefile']
     pygmentsLexer:     'coffee-script'
+    highlightJS:       'coffeescript'
     # **CoffeScript's multi-line block-comment styles.**
 
     # - Variant 1:
@@ -102,6 +105,7 @@ module.exports = LANGUAGES =
   Handlebars:
     nameMatchers:      ['.handlebars', '.hbs']
     pygmentsLexer:     'html' # TODO: is there a handlebars/mustache lexer? Nope. Lame.
+    highlightJS:       'handlebars'
     multiLineComment:  [
       '<!--', '', '-->', # HTML block comments go first, for code highlighting / segment splitting purposes
       '{{!',  '', '}}'   # Actual handlebars block comments
@@ -122,6 +126,8 @@ module.exports = LANGUAGES =
   Jade:
     nameMatchers:      ['.jade']
     pygmentsLexer:     'jade'
+    # @todo <https://github.com/isagalaev/highlight.js/pull/250>
+    highlightJS:       'AUTO'
     singleLineComment: ['//', '//-']
     ignorePrefix:      '}'
     foldPrefix:        '^'
@@ -166,13 +172,15 @@ module.exports = LANGUAGES =
   LaTeX:
     nameMatchers:      ['.tex', '.latex', '.sty']
     pygmentsLexer:     'latex'
+    highlightJS:       'tex'
     singleLineComment: ['%']
     ignorePrefix:      '}'
     foldPrefix:        '^'
 
   LESS:
     nameMatchers:      ['.less']
     pygmentsLexer:     'sass' # TODO: is there a less lexer? No. Maybe in the future.
+    highlightJS:       'scss'
     singleLineComment: ['//']
     ignorePrefix:      '}'
     foldPrefix:        '^'
@@ -202,13 +210,15 @@ module.exports = LANGUAGES =
   Mustache:
     nameMatchers:      ['.mustache']
     pygmentsLexer:     'html' # TODO: is there a handlebars/mustache lexer? Nope. Lame.
+    highlightJS:       'handlebars'
     multiLineComment:  ['{{!', '', '}}']
     ignorePrefix:      '#'
     foldPrefix:        '^'
 
   'Objective-C':
     nameMatchers:      ['.m', '.mm']
     pygmentsLexer:     'objc'
+    highlightJS:       'objectivec'
     singleLineComment: ['//']
     ignorePrefix:      '}'
     foldPrefix:        '^'
@@ -230,6 +240,7 @@ module.exports = LANGUAGES =
   Puppet:
     nameMatchers:      ['.pp']
     pygmentsLexer:     'puppet'
+    highlightJS:       'AUTO'
     singleLineComment: ['#']
     ignorePrefix:      '}'
     foldPrefix:        '^'
@@ -251,6 +262,7 @@ module.exports = LANGUAGES =
   Sass:
     nameMatchers:      ['.sass']
     pygmentsLexer:     'sass'
+    highlightJS:       'AUTO'
     singleLineComment: ['//']
     ignorePrefix:      '}'
     foldPrefix:        '^'
@@ -266,6 +278,7 @@ module.exports = LANGUAGES =
   Shell:
     nameMatchers:      ['.sh']
     pygmentsLexer:     'sh'
+    highlightJS:       'bash'
     singleLineComment: ['#']
     ignorePrefix:      '}'
     foldPrefix:        '^'
@@ -288,6 +301,7 @@ module.exports = LANGUAGES =
   YAML:
     nameMatchers:      ['.yml', '.yaml']
     pygmentsLexer:     'yaml'
+    highlightJS:       'AUTO'
     singleLineComment: ['#']
     ignorePrefix:      '}'
     foldPrefix:        '^'
diff --git a/lib/styles/default/_code_styles.sass b/lib/styles/default/_code_styles.sass
diff --git a/lib/styles/default/_codestyles.scss b/lib/styles/default/_codestyles.scss
@@ -0,0 +1,114 @@
+@mixin codestyles () {
+  $code-color-keyword: #e0c090;
+  $code-color-attribute: #a9c2ba;
+  $code-color-property: #abd9cf;
+  $code-color-class: #cee4dd;
+  $code-color-variable: #b9d0af;
+  $code-color-string: #e9baba;
+  $code-color-interpolated: #cba8d6;
+  $code-color-punctuation: #ded3a1;
+  $code-color-comment: #b1bac4;
+  $prefix: ''; // or 'hljs-'
+
+  .hljs {
+    display: block; padding: 0.5em;
+    // background: #002b36; color: #839496;
+  }
+
+  .#{$prefix}comment,
+  .#{$prefix}template_comment,
+  .diff .#{$prefix}header,
+  .#{$prefix}doctype,
+  .#{$prefix}pi,
+  .lisp .#{$prefix}string,
+  .#{$prefix}javadoc {
+    color: $code-color-comment;
+    font-style: italic;
+  }
+
+  .#{$prefix}keyword,
+  .#{$prefix}winutils,
+  .method,
+  .#{$prefix}addition,
+  .css .#{$prefix}tag,
+  .#{$prefix}request,
+  .#{$prefix}status,
+  .nginx .#{$prefix}title {
+    color: $code-color-keyword;
+  }
+
+  .#{$prefix}string {
+    color: $code-color-string;
+  }
+
+  .#{$prefix}property {
+    color: $code-color-variable;
+  }
+
+  .#{$prefix}function {
+    color: $code-color-property;
+  }
+
+  .#{$prefix}class {
+    color: $code-color-class;
+  }  
+
+  .#{$prefix}number,
+  .#{$prefix}command,
+  .#{$prefix}tag .#{$prefix}value,
+  .#{$prefix}rules .#{$prefix}value,
+  .#{$prefix}phpdoc,
+  .tex .#{$prefix}formula,
+  .#{$prefix}regexp,
+  .#{$prefix}hexcolor {
+    color: $code-color-interpolated;
+  }
+
+  .#{$prefix}title,
+  .#{$prefix}localvars,
+  .#{$prefix}chunk,
+  .#{$prefix}decorator,
+  .#{$prefix}built_in,
+  .#{$prefix}identifier,
+  .vhdl .#{$prefix}literal,
+  .#{$prefix}id,
+  .css .#{$prefix}function {
+    color: $code-color-attribute;
+  }
+
+  .#{$prefix}attribute,
+  .#{$prefix}variable,
+  .lisp .#{$prefix}body,
+  .smalltalk .#{$prefix}number,
+  .#{$prefix}constant,
+  .#{$prefix}class .#{$prefix}title,
+  .#{$prefix}parent,
+  .haskell .#{$prefix}type {
+    color: $code-color-variable;
+  }
+
+  .#{$prefix}preprocessor,
+  .#{$prefix}preprocessor .#{$prefix}keyword,
+  .#{$prefix}pragma,
+  .#{$prefix}shebang,
+  .#{$prefix}symbol,
+  .#{$prefix}symbol .#{$prefix}string,
+  .diff .#{$prefix}change,
+  .#{$prefix}special,
+  .#{$prefix}attr_selector,
+  .#{$prefix}important,
+  .#{$prefix}subst,
+  .#{$prefix}cdata,
+  .clojure .#{$prefix}title,
+  .css .#{$prefix}pseudo {
+    color: $code-color-class;
+  }
+
+  .#{$prefix}deletion {
+    color: #dc322f;
+  }
+
+  .tex .#{$prefix}formula {
+    background: $code-color-string;
+  }
+}
diff --git a/lib/styles/default/style.css b/lib/styles/default/style.css
diff --git a/lib/styles/default/style.sass b/lib/styles/default/style.sass
@@ -1,5 +1,5 @@
 @import "compass"
-@import "code_styles"
+@import "codestyles"
 
 @import "compass/reset"
 
@@ -459,7 +459,7 @@ html
 
 .code
   .wrapper
-    +code-styles
+    +codestyles
     +code-font
     +text-shadow($code-shadow-color 1px 1px 0)
     color: $code-foreground-color