Fixes #9: Theme not correclty applied to code blocks

- Prism.js css styles target the <code> and <pre> blocks using a substring CSS selector. Adding "language-" to each element should be sufficient to trigger correct color theme
- Add eslint-config-semistandard
- Add test
- Add Travis integration

.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

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

@@ -2,7 +2,11 @@
   "name": "gitbook-plugin-prism",
   "description": "Prism highlighting for gitbook",
   "main": "index.js",
-  "version": "1.1.0",
+  "version": "1.0.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.0",
+    "eslint-config-semistandard": "7.0.0",
+    "eslint-config-standard": "6.2.1",
+    "eslint-plugin-promise": "3.3.2",
+    "eslint-plugin-react": "6.6.0",
+    "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();
+
+});