Skip to content

Commit 21b200c

Browse files
author
Christopher Baker
committed
utilize prism from bit-docs-prettify
1 parent 50678fb commit 21b200c

File tree

4 files changed

+49
-227
lines changed

4 files changed

+49
-227
lines changed

‎index.js‎

Lines changed: 25 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -1,145 +1,38 @@
1-
require("./static/styles/highlight-line.less");
21
var $ = require("jquery");
32

4-
var getLines = function(lineString) {
5-
var lineArray = lineString.split(',');
6-
var result = {};
7-
8-
for (var i = 0; i < lineArray.length; i++) {
9-
var val = lineArray[i];
10-
11-
// Matches any string with 1+ digits dash 1+ digits
12-
// will ignore non matching strings
13-
if (/^([\d]+-[\d]+)$/.test(val)) {
14-
var values = val.split('-'),
15-
start = (values[0] - 1),
16-
finish = (values[1] - 1);
17-
18-
for (var j = start; finish >= j; j++) {
19-
result[j] = true;
20-
}
21-
//matches one or more digits
22-
} else if (/^[\d]+$/.test(val)) {
23-
result[val - 1] = true;
24-
} else {
25-
result[val] = true;
26-
}
3+
var getConfig = function(lineString) {
4+
var lines = lineString
5+
.split(',')
6+
.map(function(data) {
7+
return data.trim();
8+
});
279

10+
var only = false;
11+
var index = lines.indexOf('only');
12+
if (index > -1) {
13+
only = true;
14+
lines.splice(index, 1);
2815
}
29-
return result;
30-
};
3116

32-
/**
33-
* @parent bit-docs-html-highlight-line/static
34-
* @module {function} bit-docs-html-highlight-line/highlight-line.js
35-
*
36-
* Main front end JavaScript file for static portion of this plugin.
37-
*
38-
* @signature `addHighlights()`
39-
*
40-
* Goes through the lines in a `<code>` block and highlights the specified
41-
* ranges.
42-
*
43-
* Finds all `<span highlight-line="..."></span>` elements and uses those as
44-
* directives for what to highlight.
45-
*
46-
* If the `only` option was specified to the
47-
* [bit-docs-html-highlight-line/tags/highlight] tag, then non-highlighted
48-
* lines will be collapsed if they exist greater than three lines away from a
49-
* highlighted line.
50-
*/
51-
function addHighlights() {
17+
return {
18+
lines: lines.join(','),
19+
collapse: false,
20+
};
21+
};
5222

23+
module.exports = function() {
5324
$('span[line-highlight]').each(function(i, el) {
5425
var $el = $(el);
55-
var lines = getLines($el.attr('line-highlight'));
56-
var codeBlock = $el.parent().prev('pre').children('code');
57-
codeBlock.addClass("line-highlight");
58-
59-
var lineMap = [[]];
60-
var k = 0;
61-
codeBlock.children().each(function(i, el) {
62-
var nodeText = $(el).text();
63-
if (/\n/.test(nodeText)) {
26+
var config = getConfig($el.attr('line-highlight'));
27+
var preBlock = $el.parent().prev('pre');
28+
var codeBlock = preBlock.children('code');
6429

65-
var cNames = $(el).attr('class');
66-
var str = nodeText.split('\n');
67-
var l = str.length;
30+
if (preBlock) {
31+
preBlock.attr('data-line', config.lines);
6832

69-
for (var j = 0; j < l; j++) {
70-
var text = j === (l - 1) ? str[j] : str[j] + '\n';
71-
var newNode = document.createElement('span');
72-
newNode.className = cNames;
73-
$(newNode).text(text);
74-
lineMap[k].push(newNode);
75-
76-
if (j !== (l - 1)) {
77-
k++;
78-
lineMap[k] = [];
79-
}
80-
}
81-
} else {
82-
lineMap[k].push(el);
33+
if (config.collapse) {
34+
preBlock.attr('data-collapse', config.collapse);
8335
}
84-
});
85-
86-
codeBlock.empty();
87-
if(lines.only) {
88-
var segments = [];
89-
lineMap.forEach(function(lineNodes, lineNumber){
90-
var visible = lines[lineNumber];
91-
var lineNode = document.createElement('span');
92-
$(lineNode).append(lineNodes);
93-
lineNode.className = lines[lineNumber] ? 'line highlight line-'+lineNumber: 'line line-'+lineNumber ;
94-
95-
var lastSegment = segments[segments.length - 1];
96-
if(!lastSegment || lastSegment.visible !== visible) {
97-
segments.push(lastSegment = {visible: visible, lines: []});
98-
}
99-
lastSegment.lines.push(lineNode);
100-
101-
102-
});
103-
segments.forEach(function(segment, index){
104-
var next = segments[index+1];
105-
106-
if(segment.visible) {
107-
// take 3 lines from next if possible
108-
if(next) {
109-
var first = next.lines.splice(0,3);
110-
segment.lines = segment.lines.concat(first);
111-
}
112-
codeBlock.append(segment.lines);
113-
} else {
114-
// move 3 lines to next if possible
115-
if(next) {
116-
var last = segment.lines.splice(segment.lines.length-3);
117-
next.lines = last.concat(next.lines);
118-
}
119-
if(segment.lines.length > 2) {
120-
var expander = document.createElement('div');
121-
expander.className = "expand";
122-
expander.addEventListener("click", function(){
123-
$(expander).replaceWith(segment.lines);
124-
});
125-
codeBlock.append(expander);
126-
} else {
127-
codeBlock.append(segment.lines);
128-
}
129-
}
130-
});
131-
132-
133-
} else {
134-
lineMap.forEach(function(lineNodes, lineNumber){
135-
var newNode = document.createElement('span');
136-
newNode.className = lines[lineNumber] ? 'line highlight': 'line' ;
137-
$(newNode).append(lineNodes);
138-
codeBlock.append(newNode);
139-
});
14036
}
141-
14237
});
143-
}
144-
145-
module.exports = addHighlights;
38+
};

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,6 @@
3131
"bit-docs-generate-html": "^0.1.0",
3232
"connect": "^2.14.4",
3333
"mocha": "^2.5.3",
34-
"zombie": "^4.2.1"
34+
"zombie": "^4.3.0"
3535
}
3636
}

‎static/styles/highlight-line.less‎

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎test.js‎

Lines changed: 23 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -3,68 +3,39 @@ var generate = require("bit-docs-generate-html/generate");
33
var path = require("path");
44
var fs = require("fs");
55

6-
var Browser = require("zombie"),
7-
connect = require("connect");
6+
var Browser = require("zombie");
7+
var connect = require("connect");
88

9-
var find = function(browser, property, callback, done){
10-
var start = new Date();
11-
var check = function(){
12-
if(browser.window && browser.window[property]) {
13-
callback(browser.window[property]);
14-
} else if(new Date() - start < 2000){
15-
setTimeout(check, 20);
16-
} else {
17-
done("failed to find "+property);
18-
}
19-
};
20-
check();
21-
};
22-
23-
var waitFor = function(browser, checker, callback, done){
24-
var start = new Date();
25-
var check = function(){
26-
if(checker(browser.window)) {
27-
callback(browser.window);
28-
} else if(new Date() - start < 2000){
29-
setTimeout(check, 20);
30-
} else {
31-
done(new Error("checker was never true"));
32-
}
33-
};
34-
check();
35-
};
36-
37-
38-
var open = function(url, callback, done){
9+
var open = function(url, callback, done) {
3910
var server = connect().use(connect.static(path.join(__dirname))).listen(8081);
4011
var browser = new Browser();
41-
browser.visit("http://localhost:8081/"+url)
42-
.then(function(){
43-
callback(browser, function(){
12+
browser.visit("http://localhost:8081/" + url)
13+
.then(function() {
14+
callback(browser, function() {
4415
server.close();
4516
});
46-
}).catch(function(e){
17+
}).catch(function(e) {
4718
server.close();
4819
done(e);
4920
});
5021
};
5122

52-
describe("bit-docs-tag-demo", function(){
53-
it("basics works", function(done){
23+
describe("bit-docs-html-highlight-line", function() {
24+
it("basics works", function(done) {
5425
this.timeout(60000);
5526

5627
var docMap = Promise.resolve({
5728
index: {
5829
name: "index",
5930
demo: "path/to/demo.html",
60-
body: ""+fs.readFileSync(__dirname+"/test-demo.md")
31+
body: fs.readFileSync(__dirname+"/test-demo.md", "utf8")
6132
}
6233
});
6334

6435
generate(docMap, {
6536
html: {
6637
dependencies: {
67-
"bit-docs-prettify": "^0.1.0",
38+
// "bit-docs-prettify": "^0.1.0",
6839
"bit-docs-html-highlight-line": __dirname
6940
}
7041
},
@@ -73,23 +44,19 @@ describe("bit-docs-tag-demo", function(){
7344
forceBuild: true,
7445
debug: true,
7546
minifyBuild: false
76-
}).then(function(){
47+
}).then(function() {
48+
open("temp/index.html",function(browser, close) {
49+
var doc = browser.window.document;
50+
51+
var lineCodes = doc.querySelectorAll('pre[data-line] code');
52+
var collapseCodes = doc.querySelectorAll('pre[data-collapse] code');
53+
54+
assert.ok(lineCodes.length, "there are code blocks with data-line");
55+
// assert.ok(collapseCodes.length, "there are code blocks with data-collapse");
7756

78-
open("temp/index.html",function(browser, close){
79-
waitFor(browser, function(window){
80-
return window.document.getElementsByClassName("highlight").length;
81-
}, function(){
82-
var doc = browser.window.document;
83-
var highlights = doc.getElementsByClassName("highlight");
84-
// NOTE: there should be 2 lines. But it seems
85-
// like prettify doesn't work in zombie right.
86-
assert.ok(highlights.length, "there are 2 tabs");
87-
var codeBlocks = doc.getElementsByClassName("line-highlight");
88-
assert.ok(codeBlocks.length, "there are code blocks with highlight class");
89-
close();
90-
done();
91-
}, done);
92-
},done);
57+
close();
58+
done();
59+
}, done);
9360
}, done);
9461
});
9562
});

0 commit comments

Comments
 (0)