diff options
Diffstat (limited to 'packages/gitbook-plugin-highlight')
5 files changed, 154 insertions, 7 deletions
diff --git a/packages/gitbook-plugin-highlight/_assets/website/white.css b/packages/gitbook-plugin-highlight/_assets/website/white.css new file mode 100644 index 0000000..d59f1d4 --- /dev/null +++ b/packages/gitbook-plugin-highlight/_assets/website/white.css @@ -0,0 +1,92 @@ +/* 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 c366194..a174e6c 100644 --- a/packages/gitbook-plugin-highlight/package.json +++ b/packages/gitbook-plugin-highlight/package.json @@ -5,7 +5,8 @@ "browser": "./_assets/plugin.js", "version": "2.0.2", "dependencies": { - "gitbook-core": "^0.0.0" + "gitbook-core": "^0.0.0", + "highlight.js": "9.7.0" }, "devDependencies": { "gitbook-plugin": "*" diff --git a/packages/gitbook-plugin-highlight/src/ALIASES.js b/packages/gitbook-plugin-highlight/src/ALIASES.js new file mode 100644 index 0000000..799efef --- /dev/null +++ b/packages/gitbook-plugin-highlight/src/ALIASES.js @@ -0,0 +1,10 @@ + +const ALIASES = { + 'py': 'python', + 'js': 'javascript', + 'json': 'javascript', + 'rb': 'ruby', + 'csharp': 'cs' +}; + +module.exports = ALIASES; diff --git a/packages/gitbook-plugin-highlight/src/CodeBlock.js b/packages/gitbook-plugin-highlight/src/CodeBlock.js index f55524f..89f6793 100644 --- a/packages/gitbook-plugin-highlight/src/CodeBlock.js +++ b/packages/gitbook-plugin-highlight/src/CodeBlock.js @@ -1,14 +1,54 @@ +const hljs = require('highlight.js'); const GitBook = require('gitbook-core'); const { React } = GitBook; +const getLanguage = require('./getLanguage'); + +/** + * Get children as text + * @param {React.Children} children + * @return {String} + */ +function getChildrenToText(children) { + return React.Children.map(children, child => { + if (typeof child === 'string') { + return child; + } else { + return child.props.children ? + getChildrenToText(child.props.children) : ''; + } + }).join(''); +} + const CodeBlock = React.createClass({ propTypes: { - children: React.PropTypes.children + children: React.PropTypes.node, + className: React.PropTypes.string }, render() { - const { children } = this.props; - return <span />; + const { children, className } = this.props; + const content = getChildrenToText(children); + const lang = getLanguage(className); + + const includeCSS = <GitBook.ImportCSS href="gitbook/highlight/white.css" />; + + try { + const html = hljs.highlight(lang, content).value; + return ( + <code> + {includeCSS} + <span dangerouslySetInnerHTML={{__html: html}} /> + </code> + ); + } catch (e) { + return ( + <code> + {includeCSS} + {content} + </code> + ); + } } }); diff --git a/packages/gitbook-plugin-highlight/src/getLanguage.js b/packages/gitbook-plugin-highlight/src/getLanguage.js index 47b68cf..7a1bf8e 100644 --- a/packages/gitbook-plugin-highlight/src/getLanguage.js +++ b/packages/gitbook-plugin-highlight/src/getLanguage.js @@ -1,14 +1,16 @@ const GitBook = require('gitbook-core'); const { List } = GitBook.Immutable; +const ALIASES = require('./ALIASES'); + /** * Return language for a code blocks from a list of class names * - * @param {Array<String>} + * @param {String} className * @return {String} */ -function getLanguage(classNames) { - return List(classNames) +function getLanguage(className) { + const lang = List(className.split(' ')) .map(function(cl) { // Markdown if (cl.search('lang-') === 0) { @@ -25,6 +27,8 @@ function getLanguage(classNames) { .find(function(cl) { return Boolean(cl); }); + + return ALIASES[lang] || lang; } module.exports = getLanguage; |