colors (#15)

* add prism (fixes #14)

* add line number, previewers, and command line

* adjust styles

Author: Christopher Baker

CONTRIBUTING.md

@@ -6,9 +6,7 @@ For general contributing guidelines, see the [Contributing Guide on DoneJS.com](
 
     bit-docs-prettify
     ├── bit-docs.js         # Registers this package into the bit-docs system as a dependency.
-    ├── prettify-engine.js  # The minified JavaScript for the prettify engine from google/code-prettify.
-    ├── prettify.js         # Bootstraps the prettify-engine.js and prettify.less files.
-    ├── prettify.less       # The "Tomorrow Night" syntax highlight theme.
+    ├── prettify.js         # Bootstraps prism.
     └── test.js             # Creates temp/index.html with <pre><code>var str ='hello world';</code></pre>
                             #   to verify that prettyprint gets applied after a timeout.
 
@@ -35,16 +33,32 @@ npm test
 This will produce a directory and file at `temp/index.html`, containing the source-code snippet in HTML:
 
 ```html
-<pre><code>var str ='hello world';</code></pre>
+<pre><code class="language-javascript">var str = 'hello world';</code></pre>
+<pre><code class="language-css">body{ margin: 0; background: purple; }</code></pre>
+<pre><code>// some misc code</code></pre>
+<p><code>var str = 'hello world';</code>
 ```
 
 Running the tests will verify that this source-code snippet in HTML is correctly prettified by the plugin.
 
 In [`test.js`](test.js), the [bit-docs-generate-html](https://github.com/bit-docs/bit-docs-generate-html) plugin is generating HTML from the equivalent of this markdown:
 
+    ```javascript
+    var str = 'hello world';
     ```
-    var str ='hello world';
+
+    ```css
+    body {
+      margin: 0;
+      background: purple;
+    }
+    ```
+
     ```
+    // some misc code
+    ```
+
+    `var str = 'hello world';`
 
 That shows how a bit-docs "generator" plugin can generate the right HTML to play nice with `bit-docs-prettify`.
 

README.md

@@ -31,17 +31,15 @@ Now use the `bit-docs` command-line tool to install the added plugin dependency:
 
 Your project should now support syntax highlighting of source-code snippets in the following languages:
 
-    bsh, c, cc, cpp, cs, csh, cyc, cv, htm, html, java, js, m, mxml, perl, pl, pm, py, rb, sh, xhtml, xml, xsl 
+    javascript, js, clike, css, markup, xml, html, mathml, svg
 
 Use the following HTML code to trigger syntax highlighting of a source-code snippet:
 
 ```html
-<pre><code class="language-java">...</code></pre>
+<pre><code class="language-javascript">...</code></pre>
 ```
 
-You can replace `language-java` with an option from the list of supported languages above, like `language-js`.
-
-The code prettifier script will make an educated guess if you remove the `class="language-*"` declaration entirely.
+You can replace `language-javascript` with an option from the list of supported languages above, like `language-js`.
 
 ## Contributing
 

bit-docs.js

@@ -4,22 +4,23 @@
  * @group bit-docs-prettify/static static
  *
  * @description A bit-docs plugin that makes source-code snippets in HTML prettier.
- * 
+ *
  * @body
- * 
+ *
  * This plugin registers onto the `html` hook.
- * 
+ *
  * Registering the `html` hook adds a static JavaScript file
  * [bit-docs-prettify/prettify.js] that will go through every `<code>` element
- * on the page applying the
- * [code prettifier](https://github.com/google/code-prettify).
+ * on the page applying
+ * [prism](https://www.npmjs.com/package/prismjs).
  */
-module.exports = function(bitDocs){
-    var pkg = require("./package.json");
-    var dependencies = {};
-    dependencies[pkg.name] = pkg.version;
+module.exports = function(bitDocs) {
+	var pkg = require("./package.json");
+
+	var dependencies = {};
+	dependencies[pkg.name] = pkg.version;
 
-    bitDocs.register("html", {
-        dependencies: dependencies
-    });
+	bitDocs.register("html", {
+		dependencies: dependencies
+	});
 }

package.json

@@ -25,18 +25,14 @@
     "url": "https://github.com/bit-docs/bit-docs-prettify/issues"
   },
   "homepage": "https://github.com/bit-docs/bit-docs-prettify#readme",
-  "system": {
-    "meta": {
-      "./prettify-engine": {
-        "format": "global"
-      }
-    }
-  },
   "devDependencies": {
     "bit-docs-generate-html": "^0.1.0",
     "connect": "^2.14.4",
     "mocha": "^3.1.2",
     "q": "^1.4.1",
     "zombie": "^4.2.1"
+  },
+  "dependencies": {
+    "prismjs": "^1.11.0"
   }
 }