Prism fixes (#17)

* create prism-collapse plugin
* fix prism styles, add line-highlight, trim trailing newlines, highlight html template strings
* refactor collapse and collapse line numbers
* collapse handles highlights
* disable prism auto-run and fix highlight color
* do not upgrade naked code
* remove highlight and collapse code (moved to bit-docs-html-highlight-line)

Author: Christopher Baker

package.json

@@ -7,7 +7,7 @@
     "test": "mocha test.js --reporter spec",
     "postversion": "git push --tags && git push",
     "preversion": "npm test",
-    "release:pre": "npm version prerelease && npm publish",
+    "release:pre": "npm version prerelease && npm publish --tag=pre",
     "release:patch": "npm version patch && npm publish",
     "release:minor": "npm version minor && npm publish",
     "release:major": "npm version major && npm publish"
@@ -29,8 +29,7 @@
     "bit-docs-generate-html": "^0.1.0",
     "connect": "^2.14.4",
     "mocha": "^3.1.2",
-    "q": "^1.4.1",
-    "zombie": "^4.2.1"
+    "zombie": "^4.3.0"
   },
   "dependencies": {
     "prismjs": "^1.11.0"

prettify.js

@@ -1,49 +1,62 @@
 require("./prettify.less");
 
+require("./prism-config");
 var Prism = 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");
+
+require("prismjs/plugins/line-numbers/prism-line-numbers");
 require("prismjs/plugins/line-numbers/prism-line-numbers.css");
+
+require("prismjs/plugins/previewers/prism-previewers");
 require("prismjs/plugins/previewers/prism-previewers.css");
+
+require("prismjs/plugins/command-line/prism-command-line");
 require("prismjs/plugins/command-line/prism-command-line.css");
 
-/**
- * @parent bit-docs-prettify/static
- * @module {function} bit-docs-prettify/prettify.js
- *
- * Main front end JavaScript file for static portion of this plugin.
- *
- * @signature `prettyPrint()`
- *
- * Finds all `<code>` elements on the page and adds the `prettyprint` class
- * before executing the required pretty print engine.
- *
- * Also requires [bit-docs-prettify/prettify.less].
- */
-module.exports = function(){
+require("prismjs/plugins/toolbar/prism-toolbar");
+require("prismjs/plugins/toolbar/prism-toolbar.css");
+require("prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard");
+
+Prism.languages.insertBefore('javascript', 'template-string', {
+	'html-template-string': {
+		pattern: /`(?:[\s\S])*<[a-z-]+(?:\s+[^<>]*)?>(?:[\s\S])*`/,
+		inside: {
+			'interpolation': {
+				pattern: /\$\{[^}]+\}/,
+				inside: {
+					'interpolation-punctuation': {
+						pattern: /^\$\{|\}$/,
+						alias: 'punctuation'
+					},
+					rest: Prism.languages.javascript
+				}
+			},
+			rest: Prism.languages.html
+		}
+	}
+});
+
+module.exports = function() {
 	var codes = document.getElementsByTagName("code");
 	for (var i = 0; i < codes.length; i++) {
 		var code = codes[i];
 
+		if (code.textContent.slice(-1) === "\n") {
+			code.textContent = code.textContent.slice(0, -1);
+		}
+
 		if (code.parentNode.nodeName.toUpperCase() === "PRE") {
 			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);
-				}
+			if (!code.className.includes("language-")) {
+				code.className += " language-unknown";
 			}
 		}
 	}
 
-	Prism.highlightAll();
-}
+	window.requestAnimationFrame(Prism.highlightAll);
+};

prettify.less

@@ -1,4 +1,19 @@
-pre[class*="language-"] > code {
-    border-left: none !important;
-    box-shadow: 0px 0px 0px 1px #dfdfdf !important;
+article {
+    pre[class*="language-"] > code {
+        font-size: 16px;
+        margin: 0;
+        border-left: none;
+        box-shadow: 0px 0px 0px 1px #dfdfdf;
+        background-image: none;
+    }
+
+    pre[class*=language-]:after, pre[class*=language-]:before {
+        display: none;
+        content: none;
+    }
+
+    .line-highlight {
+        background: rgba(0, 180, 0, .1);
+        background: linear-gradient(to right, rgba(0, 180, 0, .1) 70%, rgba(0, 180, 0, 0));
+    }
 }

prism-config.js

@@ -0,0 +1,3 @@
+window.Prism = {
+	manual: true
+};

test.js

@@ -1,13 +1,38 @@
 var generate = require("bit-docs-generate-html/generate");
-var Q = require("q");
 var path = require("path");
+var fs = require("fs");
 var assert = require("assert");
 
 var Browser = require("zombie");
 var connect = require("connect");
 
+function zombieFixes() {
+	Object.defineProperty(HTMLElement.prototype, 'classList', {
+		get: function() {
+			var parent = this;
+
+			var classList = parent.className.split(' ');
+			classList.contains = classList.includes;
+			classList.add = function(token) {
+				this.push(token);
+				parent.className = this.join(' ');
+			};
+
+			return classList;
+		}
+	});
+}
+zombieFixes = zombieFixes.toString() + "\nzombieFixes();\n\n"
+
 var open = function(url, callback, done) {
-	var server = connect().use(connect.static(path.join(__dirname))).listen(8081);
+	var stealPath = path.join(__dirname, "temp", "static", "node_modules", "steal", "steal.production.js");
+	fs.writeFileSync(stealPath, zombieFixes + fs.readFileSync(stealPath, "utf8"));
+
+	var indexPath = path.join(__dirname, "temp", "index.html");
+	fs.writeFileSync(indexPath, fs.readFileSync(indexPath, "utf8").replace("</head>", "<script src='https:\/\/cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script></head>"));
+
+
+	var server = connect().use(connect.static(path.join(__dirname, 'temp'))).listen(8081);
 	var browser = new Browser();
 
 	browser.visit("http://localhost:8081/" + url)
@@ -27,7 +52,7 @@ describe("bit-docs-prettify", function() {
 	it("basics work", function(done) {
 		this.timeout(30000);
 
-		var docMap = Q({
+		var docMap = Promise.resolve({
 			index: {
 				name: "index",
 				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```"
@@ -45,13 +70,13 @@ describe("bit-docs-prettify", function() {
 			forceBuild: true
 		})
 			.then(function() {
-				open("temp/index.html", function(browser, close) {
+				open("index.html", function(browser, close) {
 					var codes = browser.window.document.getElementsByTagName("code");
 
 					for (var i = 0; i < codes.length; i++) {
 						assert.ok(codes[i].className.includes("language-"), "has a language");
 
-						if (codes[i].parentNode.nodeName === "pre") {
+						if (codes[i].parentNode.nodeName === "PRE") {
 							assert.ok(codes[i].parentNode.className.includes("language-"), "parent has a language");
 						}
 					}
@@ -61,7 +86,7 @@ describe("bit-docs-prettify", function() {
 				}, done);
 			})
 			.catch(function(err) {
-				console.log("err", err.stack);
+				console.log(err);
 				done(err);
 			})
 		;