utilize prism from bit-docs-prettify

Author: Christopher Baker

index.js

@@ -1,145 +1,38 @@
-require("./static/styles/highlight-line.less");
-var $ = require("jquery");
+var $ = e("jquery");
 
-var getLines = function(lineString) {
-	var lineArray = lineString.split(',');
-	var result = {};
-
-	for (var i = 0; i < lineArray.length; i++) {
-		var val = lineArray[i];
-
-		// Matches any string with 1+ digits dash 1+ digits
-		// will ignore non matching strings
-		if (/^([\d]+-[\d]+)$/.test(val)) {
-			var values = val.split('-'),
-				start = (values[0] - 1),
-				finish = (values[1] - 1);
-
-			for (var j = start; finish >= j; j++) {
-				result[j] = true;
-			}
-			//matches one or more digits
-		} else if (/^[\d]+$/.test(val)) {
-			result[val - 1] = true;
-		} else {
-			result[val] = true;
-		}
+var getConfig = function(lineString) {
+	var lines = lineString
+		.split(',')
+		.map(function(data) {
+			return data.trim();
+		});
 
+	var only = false;
+	var index = lines.indexOf('only');
+	if (index > -1) {
+		only = true;
+		lines.splice(index, 1);
 	}
-	return result;
-};
 
-/**
- * @parent bit-docs-html-highlight-line/static
- * @module {function} bit-docs-html-highlight-line/highlight-line.js
- * 
- * Main front end JavaScript file for static portion of this plugin.
- * 
- * @signature `addHighlights()`
- * 
- * Goes through the lines in a `<code>` block and highlights the specified
- * ranges. 
- * 
- * Finds all `<span highlight-line="..."></span>` elements and uses those as
- * directives for what to highlight.
- * 
- * If the `only` option was specified to the
- * [bit-docs-html-highlight-line/tags/highlight] tag, then non-highlighted
- * lines will be collapsed if they exist greater than three lines away from a
- * highlighted line.
- */
-function addHighlights() {
+	return {
+		lines: lines.join(','),
+		collapse: false,
+	};
+};
 
+module.exports = function() {
 	$('span[line-highlight]').each(function(i, el) {
 		var $el = $(el);
-		var lines = getLines($el.attr('line-highlight'));
-		var codeBlock = $el.parent().prev('pre').children('code');
-		codeBlock.addClass("line-highlight");
-
-		var lineMap = [[]];
-		var k = 0;
-		codeBlock.children().each(function(i, el) {
-			var nodeText = $(el).text();
-			if (/\n/.test(nodeText)) {
+		var config = getConfig($el.attr('line-highlight'));
+		var preBlock = $el.parent().prev('pre');
+		var codeBlock = preBlock.children('code');
 
-				var cNames = $(el).attr('class');
-				var str = nodeText.split('\n');
-				var l = str.length;
+		if (preBlock) {
+			preBlock.attr('data-line', config.lines);
 
-				for (var j = 0; j < l; j++) {
-					var text = j === (l - 1) ? str[j] : str[j] + '\n';
-					var newNode = document.createElement('span');
-					newNode.className = cNames;
-					$(newNode).text(text);
-					lineMap[k].push(newNode);
-
-					if (j !== (l - 1)) {
-						k++;
-						lineMap[k] = [];
-					}
-				}
-			} else {
-				lineMap[k].push(el);
+			if (config.collapse) {
+				preBlock.attr('data-collapse', config.collapse);
 			}
-		});
-
-		codeBlock.empty();
-		if(lines.only) {
-			var segments = [];
-			lineMap.forEach(function(lineNodes, lineNumber){
-				var visible = lines[lineNumber];
-				var lineNode = document.createElement('span');
-				$(lineNode).append(lineNodes);
-				lineNode.className = lines[lineNumber] ? 'line highlight line-'+lineNumber: 'line line-'+lineNumber ;
-
-				var lastSegment = segments[segments.length - 1];
-				if(!lastSegment || lastSegment.visible !== visible) {
-					segments.push(lastSegment = {visible: visible, lines: []});
-				}
-				lastSegment.lines.push(lineNode);
-
-
-			});
-			segments.forEach(function(segment, index){
-				var next = segments[index+1];
-
-				if(segment.visible) {
-					// take 3 lines from next if possible
-					if(next) {
-						var first = next.lines.splice(0,3);
-						segment.lines = segment.lines.concat(first);
-					}
-					codeBlock.append(segment.lines);
-				} else {
-					// move 3 lines to next if possible
-					if(next) {
-						var last = segment.lines.splice(segment.lines.length-3);
-						next.lines = last.concat(next.lines);
-					}
-					if(segment.lines.length > 2) {
-						var expander = document.createElement('div');
-						expander.className = "expand";
-						expander.addEventListener("click", function(){
-							$(expander).replaceWith(segment.lines);
-						});
-						codeBlock.append(expander);
-					} else {
-						codeBlock.append(segment.lines);
-					}
-				}
-			});
-
-
-		} else {
-			lineMap.forEach(function(lineNodes, lineNumber){
-				var newNode = document.createElement('span');
-				newNode.className = lines[lineNumber] ? 'line highlight': 'line' ;
-				$(newNode).append(lineNodes);
-				codeBlock.append(newNode);
-			});
 		}
-
 	});
-}
-
-module.exports = addHighlights;
+};