add line number, previewers, and command line

CONTRIBUTING.md

@@ -33,29 +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 class="language-javascript">var str ='hello world';</code></pre>
-<pre><code class="language-css">body{ margin: 0; }</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>
+<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; }
+    body {
+      margin: 0;
+      background: purple;
+    }
     ```
 
     ```
     // some misc code
     ```
 
-    `var str ='hello world';`
+    `var str = 'hello world';`
 
 That shows how a bit-docs "generator" plugin can generate the right HTML to play nice with `bit-docs-prettify`.
 

prettify.js

@@ -1,5 +1,12 @@
+require("prismjs");
+require("prismjs/plugins/line-numbers/prism-line-numbers.js");
+require("prismjs/plugins/previewers/prism-previewers.js");
+require("prismjs/plugins/command-line/prism-command-line.js");
+
 require("prismjs/themes/prism-coy.css");
-var Prism = require("prismjs");
+require("prismjs/plugins/line-numbers/prism-line-numbers.css");
+require("prismjs/plugins/previewers/prism-previewers.css");
+require("prismjs/plugins/command-line/prism-command-line.css");
 
 /**
  * @parent bit-docs-prettify/static
@@ -20,14 +27,22 @@ module.exports = function(){
 			var code = codes[i];
 
 			if (code.parentNode.nodeName.toUpperCase() === "PRE") {
-				if (!code.parentNode.className.includes("language-")) {
-					code.parentNode.className += " language-unknown";
+				code.parentNode.className += " line-numbers";
+
+				if (!code.className.includes("language-")) {
+					code.className += " language-unknown";
+				}
+
+				if (code.className.includes("language-shell")) {
+					code.parentNode.className += " command-line";
+
+					if (code.textContent.slice(-1) === "\n") {
+						code.textContent = code.textContent.slice(0, -1);
+					}
 				}
 			}
 			else {
 				code.className += " language-unknown";
 			}
 	}
-
-	Prism.highlightAll();
 }

test.js

@@ -30,7 +30,7 @@ describe("bit-docs-prettify", function() {
 		var docMap = Q({
 			index: {
 					name: "index",
-					body: "```javascript\nvar str ='hello world';\n```\n\n```css\nbody { margin: 0; }\n```\n\n```\n// some misc code\n```\n\n`var str ='hello world';`"
+					body: "```javascript\nvar str = 'hello world';\n```\n\n```css\nbody {\n  margin: 0;\n  background: purple;\n}\n```\n\n```shell\npwd\n```\n\n```\n// some misc code\n```\n\n`var str = 'hello world';`"
 			}
 		});
 
@@ -52,7 +52,7 @@ describe("bit-docs-prettify", function() {
 						assert.ok(codes[i].className.includes("language-"), "has a language");
 
 						if (codes[i].parentNode.nodeName === "pre") {
-							assert.ok(codes[i].parentNode.className.includes("language-"), "has a language");
+							assert.ok(codes[i].parentNode.className.includes("language-"), "parent has a language");
 						}
 					}