Add "theme" option to default syntax highlighting

7 files changed, 186 insertions, 106 deletions

diff --git a/packages/gitbook-plugin-highlight/_assets/website/tomorrow-night.css b/packages/gitbook-plugin-highlight/_assets/website/tomorrow-night.css
new file mode 100644
index 0000000..ddd270a
--- /dev/null
+++ b/packages/gitbook-plugin-highlight/_assets/website/tomorrow-night.css
@@ -0,0 +1,75 @@
+/* Tomorrow Night Theme */
+/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+/* Original theme - https://github.com/chriskempson/tomorrow-theme */
+/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+
+/* Tomorrow Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #969896;
+}
+
+/* Tomorrow Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-regexp,
+.hljs-deletion {
+  color: #cc6666;
+}
+
+/* Tomorrow Orange */
+.hljs-number,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params,
+.hljs-meta,
+.hljs-link {
+  color: #de935f;
+}
+
+/* Tomorrow Yellow */
+.hljs-attribute {
+  color: #f0c674;
+}
+
+/* Tomorrow Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+  color: #b5bd68;
+}
+
+/* Tomorrow Blue */
+.hljs-title,
+.hljs-section {
+  color: #81a2be;
+}
+
+/* Tomorrow Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #b294bb;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #1d1f21;
+  color: #c5c8c6;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/packages/gitbook-plugin-highlight/_assets/website/tomorrow.css b/packages/gitbook-plugin-highlight/_assets/website/tomorrow.css
new file mode 100644
index 0000000..026a62f
--- /dev/null
+++ b/packages/gitbook-plugin-highlight/_assets/website/tomorrow.css
@@ -0,0 +1,72 @@
+/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+
+/* Tomorrow Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #8e908c;
+}
+
+/* Tomorrow Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-regexp,
+.hljs-deletion {
+  color: #c82829;
+}
+
+/* Tomorrow Orange */
+.hljs-number,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params,
+.hljs-meta,
+.hljs-link {
+  color: #f5871f;
+}
+
+/* Tomorrow Yellow */
+.hljs-attribute {
+  color: #eab700;
+}
+
+/* Tomorrow Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+  color: #718c00;
+}
+
+/* Tomorrow Blue */
+.hljs-title,
+.hljs-section {
+  color: #4271ae;
+}
+
+/* Tomorrow Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #8959a8;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: white;
+  color: #4d4d4c;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
diff --git a/packages/gitbook-plugin-highlight/_assets/website/white.css b/packages/gitbook-plugin-highlight/_assets/website/white.css
deleted file mode 100644
index d59f1d4..0000000
--- a/packages/gitbook-plugin-highlight/_assets/website/white.css
+++ /dev/null
@@ -1,92 +0,0 @@
-/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
-
-/* Tomorrow Comment */
-.hljs-comment,
-.hljs-title {
-  color: #8e908c;
-}
-
-/* Tomorrow Red */
-.hljs-variable,
-.hljs-attribute,
-.hljs-tag,
-.hljs-regexp,
-.hljs-deletion,
-.ruby .hljs-constant,
-.xml .hljs-tag .hljs-title,
-.xml .hljs-pi,
-.xml .hljs-doctype,
-.html .hljs-doctype,
-.css .hljs-id,
-.css .hljs-class,
-.css .hljs-pseudo {
-  color: #c82829;
-}
-
-/* Tomorrow Orange */
-.hljs-number,
-.hljs-preprocessor,
-.hljs-pragma,
-.hljs-built_in,
-.hljs-literal,
-.hljs-params,
-.hljs-constant {
-  color: #f5871f;
-}
-
-/* Tomorrow Yellow */
-.ruby .hljs-class .hljs-title,
-.css .hljs-rules .hljs-attribute {
-  color: #eab700;
-}
-
-/* Tomorrow Green */
-.hljs-string,
-.hljs-value,
-.hljs-inheritance,
-.hljs-header,
-.hljs-addition,
-.ruby .hljs-symbol,
-.xml .hljs-cdata {
-  color: #718c00;
-}
-
-/* Tomorrow Aqua */
-.css .hljs-hexcolor {
-  color: #3e999f;
-}
-
-/* Tomorrow Blue */
-.hljs-function,
-.python .hljs-decorator,
-.python .hljs-title,
-.ruby .hljs-function .hljs-title,
-.ruby .hljs-title .hljs-keyword,
-.perl .hljs-sub,
-.javascript .hljs-title,
-.coffeescript .hljs-title {
-  color: #4271ae;
-}
-
-/* Tomorrow Purple */
-.hljs-keyword,
-.javascript .hljs-function {
-  color: #8959a8;
-}
-
-.hljs {
-  display: block;
-  background: white;
-  color: #4d4d4c;
-  padding: 0.5em;
-}
-
-.coffeescript .javascript,
-.javascript .xml,
-.tex .hljs-formula,
-.xml .javascript,
-.xml .vbscript,
-.xml .css,
-.xml .hljs-cdata {
-  opacity: 0.5;
-}
diff --git a/packages/gitbook-plugin-highlight/package.json b/packages/gitbook-plugin-highlight/package.json
index ae6f060..a3e4ca1 100644
--- a/packages/gitbook-plugin-highlight/package.json
+++ b/packages/gitbook-plugin-highlight/package.json
@@ -1,17 +1,18 @@
 {
   "name": "gitbook-plugin-highlight",
-  "description": "Syntax highlighter for Gitbook",
+  "title": "Syntax Highlighting",
+  "description": "Highlight code blocks in your pages.",
   "main": "index.js",
   "browser": "./_assets/plugin.js",
   "version": "4.0.0-alpha.4",
   "dependencies": {
-    "highlight.js": "9.7.0"
+    "highlight.js": "9.9.0"
   },
   "devDependencies": {
     "gitbook-plugin": "^4.0.0-alpha.4"
   },
   "engines": {
-    "gitbook": ">=3.0.0"
+    "gitbook": ">=4.0.0-alpha.0"
   },
   "scripts": {
     "build-js": "gitbook-plugin build ./src/index.js ./_assets/plugin.js",
@@ -24,5 +25,18 @@
   },
   "bugs": {
     "url": "https://github.com/GitbookIO/gitbook/issues"
-  }
+  },
+  "gitbook": {
+    "properties": {
+      "theme": {
+        "type": "string",
+        "title": "Theme",
+        "description": "Color scheme for syntax highlighting.",
+        "default": "tomorrow",
+        "enum": [
+            "tomorrow"
+        ]
+      }
+    }
+}
 }
diff --git a/packages/gitbook-plugin-highlight/src/ALIASES.js b/packages/gitbook-plugin-highlight/src/ALIASES.js
index 799efef..565de36 100644
--- a/packages/gitbook-plugin-highlight/src/ALIASES.js
+++ b/packages/gitbook-plugin-highlight/src/ALIASES.js
@@ -1,9 +1,13 @@
 
+/**
+ * Common aliases also recognizes by GitHub.
+ * @type {Object}
+ */
 const ALIASES = {
-    'py': 'python',
-    'js': 'javascript',
-    'json': 'javascript',
-    'rb': 'ruby',
+    'py':     'python',
+    'js':     'javascript',
+    'json':   'javascript',
+    'rb':     'ruby',
     'csharp': 'cs'
 };
 
diff --git a/packages/gitbook-plugin-highlight/src/CodeBlock.js b/packages/gitbook-plugin-highlight/src/CodeBlock.js
index a556d36..9e3b70d 100644
--- a/packages/gitbook-plugin-highlight/src/CodeBlock.js
+++ b/packages/gitbook-plugin-highlight/src/CodeBlock.js
@@ -10,7 +10,7 @@ const getLanguage = require('./getLanguage');
  * @return {String}
  */
 function getChildrenToText(children) {
-    return React.Children.map(children, child => {
+    return React.Children.map(children, (child) => {
         if (typeof child === 'string') {
             return child;
         } else {
@@ -20,18 +20,23 @@ function getChildrenToText(children) {
     }).join('');
 }
 
+/**
+ * Code block wrapper to highlight the code inside.
+ * @type {ReactClass}
+ */
 const CodeBlock = React.createClass({
     propTypes: {
         children:  React.PropTypes.node,
+        theme:     React.PropTypes.string.isRequired,
         className: React.PropTypes.string
     },
 
     render() {
-        const { children, className } = this.props;
+        const { children, className, theme } = this.props;
         const content = getChildrenToText(children);
         const lang = getLanguage(className || '');
 
-        const includeCSS = <GitBook.ImportCSS href="gitbook/highlight/white.css" />;
+        const includeCSS = <GitBook.ImportCSS href={`gitbook/highlight/${theme}.css`} />;
 
         try {
             const html = hljs.highlight(lang, content).value;
@@ -52,4 +57,6 @@ const CodeBlock = React.createClass({
     }
 });
 
-module.exports = CodeBlock;
+module.exports = GitBook.connect(CodeBlock, ({ config }) => ({
+    theme: config.getForPlugin('highlight').get('theme')
+}));
diff --git a/packages/gitbook-plugin-highlight/src/getLanguage.js b/packages/gitbook-plugin-highlight/src/getLanguage.js
index 7a1bf8e..6a1234f 100644
--- a/packages/gitbook-plugin-highlight/src/getLanguage.js
+++ b/packages/gitbook-plugin-highlight/src/getLanguage.js
@@ -11,7 +11,7 @@ const ALIASES = require('./ALIASES');
  */
 function getLanguage(className) {
     const lang = List(className.split(' '))
-        .map(function(cl) {
+        .map((cl) => {
             // Markdown
             if (cl.search('lang-') === 0) {
                 return cl.slice('lang-'.length);
@@ -24,7 +24,7 @@ function getLanguage(className) {
 
             return null;
         })
-        .find(function(cl) {
+        .find((cl) => {
             return Boolean(cl);
         });