diff options
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); }); |