Merge pull request #10 from gaearon/hotfix/themes

Fixes #9: Themes not correctly applied to code blocks

.eslintrc

@@ -0,0 +1,5 @@
+---
+extends: eslint-config-semistandard
+rules:
+  padded-blocks: 0
+  space-before-function-paren: 0

.gitignore

@@ -1,2 +1,3 @@
 *.log
 node_modules
+/.idea

.travis.yml

@@ -0,0 +1,12 @@
+language: node_js
+node_js:
+  - '4'
+  - '5'
+  - '6'
+before_install:
+  - npm install -g npm
+cache:
+  directories:
+    - node_modules
+script:
+  - npm test

README.md

@@ -1,24 +1,11 @@
 Gitbook Plugin for [Prism](http://prismjs.com/)
 ==============
 
-<table>
-  <tr>
-    <td>
-      <h4>Before</h4>
-    </td>
-    <td>
-      <h4>After</h4>
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <img src='http://i.imgur.com/FLLEc68.png'>
-    </td>
-    <td>
-      <img src='http://i.imgur.com/Vvs81Su.png'>
-    </td>
-  </tr>
-</table>
+##### Before
+<img src='http://i.imgur.com/cbk6O52.png'>
+
+##### After
+<img src='http://i.imgur.com/S1YMlee.png'>
 
 ## Usage
 
@@ -44,6 +31,38 @@ Override default styles.  All css files must reside in the same folder.
 }
 ```
 
+### Prism Themes
+
+[https://github.com/PrismJS/prism](https://github.com/PrismJS/)
+
+#### Okaidia <small>`prismjs/themes/prism-okaidia.css`</small>
+![Okaidia](http://i.imgur.com/uhe0yQY.png)
+
+#### Solarized Light <small>`prismjs/themes/prism-solarizedlight.css`</small>
+![Solarized Light](http://i.imgur.com/71sT5XB.png)
+
+#### Tomorrow <small>`prismjs/themes/prism-tomorrow.css`</small>
+![Tomorrow](http://i.imgur.com/Li3AHXU.png)
+
+#### Dark <small>`prismjs/themes/prism-dark.css`</small>
+![Dark](http://i.imgur.com/vA5P6fy.png)
+
+#### Coy <small>`prismjs/themes/prism-coy.css`</small>
+![Coy](http://i.imgur.com/kSJP9tq.png)
+
+## Atelierbram Themes
+
+[https://github.com/atelierbram/syntax-highlighting](https://github.com/atelierbram/syntax-highlighting)
+
+#### Base16 Ocean Dark <small>`syntax-highlighting/assets/css/prism/prism-base16-ocean.dark.css`</small>
+![Base16 Ocean Dark](http://i.imgur.com/REJCdrA.png)
+
+#### Google Light <small>`syntax-highlighting/assets/css/prism/prism-base16-google.light.css`</small>
+![Google Light](http://i.imgur.com/TyBYmSu.png)
+
+#### Xonokai <small>`syntax-highlighting/assets/css/prism/prism-xonokai.css`</small>
+![Google Light](http://i.imgur.com/fPjEEv8.png)
+
 ## Credits
 
 Originally based on https://github.com/spricity/google_code_prettify.

index.js

@@ -1,6 +1,7 @@
 var Prism = require('prismjs');
-var languages =  require('prismjs').languages;
+var languages = require('prismjs').languages;
 var path = require('path');
+const cheerio = require('cheerio');
 
 var DEFAULT_LANGUAGE = 'markup';
 var MAP_LANGUAGES = {
@@ -13,13 +14,12 @@ var MAP_LANGUAGES = {
 
 function getAssets() {
 
-  var book = this;
-
   var cssFiles = this.config.get('pluginsConfig.prism.css', []);
   var cssFolder = null;
   var cssNames = [];
+  var cssName = null;
 
-  if(cssFiles.length === 0) {
+  if (cssFiles.length === 0) {
     cssFiles.push('prismjs/themes/prism.css');
   }
 
@@ -54,8 +54,8 @@ module.exports = {
       if (!languages[lang]) {
         try {
           require('prismjs/components/prism-' + lang + '.js');
-        }catch(e) {
-          console.warn('Failed to load prism syntax: '+ lang);
+        } catch (e) {
+          console.warn('Failed to load prism syntax: ' + lang);
           console.warn(e);
         }
       }
@@ -70,7 +70,7 @@ module.exports = {
       try {
         // The process can fail (failed to parse)
         highlighted = Prism.highlight(block.body, languages[lang]);
-      } catch(e) {
+      } catch (e) {
         console.warn('Failed to highlight:');
         console.warn(e);
         highlighted = block.body;
@@ -78,5 +78,33 @@ module.exports = {
 
       return highlighted;
     }
+  },
+  hooks: {
+    'page': function(page) {
+
+      var highlighted = false;
+
+      var $ = cheerio.load(page.content);
+
+      // Prism css styles target the <code> and <pre> blocks using
+      // a substring CSS selector:
+      //
+      //    code[class*="language-"], pre[class*="language-"]
+      //
+      // Adding "language-" to each element should be sufficient to trigger
+      // correct color theme.
+      $('code, pre').each(function() {
+        highlighted = true;
+        const $this = $(this);
+        $this.addClass('language-');
+
+      });
+
+      if (highlighted) {
+        page.content = $.html();
+      }
+
+      return page;
+    }
   }
 };

package.json

@@ -3,6 +3,10 @@
   "description": "Prism highlighting for gitbook",
   "main": "index.js",
   "version": "1.1.0",
+  "scripts": {
+    "lint": "eslint index.js test.js",
+    "test": "npm run lint && tape test.js"
+  },
   "engines": {
     "gitbook": ">=2.4.1"
   },
@@ -16,6 +20,17 @@
     "url": "https://github.com/gaearon/gitbook-plugin-prism/issues"
   },
   "dependencies": {
-    "prismjs": "1.5.1"
+    "prismjs": "1.5.1",
+    "cheerio": "0.22.0"
+  },
+  "devDependencies": {
+    "eslint": "3.10.2",
+    "eslint-config-semistandard": "7.0.0",
+    "eslint-config-standard": "6.2.1",
+    "eslint-plugin-promise": "3.4.0",
+    "eslint-plugin-react": "6.7.1",
+    "eslint-plugin-standard": "2.0.1",
+    "gitbook-tester": "1.4.3",
+    "tape": "4.6.2"
   }
 }

test.js

@@ -0,0 +1,24 @@
+var tester = require('gitbook-tester');
+var test = require('tape');
+
+var pkg = require('./package.json');
+
+test('should highlight javascript code block', function (t) {
+
+  t.plan(1);
+
+  tester.builder()
+    .withContent('```js\nfunction() { return true };\n```')
+    .withLocalPlugin(__dirname)
+    .withBookJson({
+      gitbook: pkg.engines.gitbook,
+      plugins: ['prism', '-highlight']
+    })
+    .create()
+    .then(function(result) {
+      var expected = '<pre class="language-"><code class="lang-js language-"><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>';
+      t.equal(result[0].content, expected);
+    })
+    .done();
+
+});