Skip to content

Commit 7999db6

Browse files
author
Christopher Baker
authored
utilize Prism from bit-docs-prettify (#8)
* utilize prism from bit-docs-prettify * add collapse support * move collapse and highlight * remove jquery
1 parent 50678fb commit 7999db6

File tree

6 files changed

+373
-229
lines changed

6 files changed

+373
-229
lines changed

‎index.js

Lines changed: 105 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -1,145 +1,118 @@
1-
require("./static/styles/highlight-line.less");
2-
var $ = require("jquery");
1+
require("bit-docs-prettify");
32

4-
var getLines = function(lineString) {
5-
var lineArray = lineString.split(',');
6-
var result = {};
3+
require("prismjs/plugins/line-highlight/prism-line-highlight");
4+
require("prismjs/plugins/line-highlight/prism-line-highlight.css");
75

8-
for (var i = 0; i < lineArray.length; i++) {
9-
var val = lineArray[i];
6+
require("./prism-collapse");
7+
require("./prism-collapse.less");
108

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);
9+
/**
10+
* Get node for provided line number
11+
* Copied from prism-line-numbers.js and modified to support nested spans
12+
* Original version assumed all line number spans were inside .line-numbers-rows
13+
* but now they may be may be nested inside collapsed sections
14+
*
15+
* @param {Element} element pre element
16+
* @param {Number} number line number
17+
* @return {Element|undefined}
18+
*/
19+
Prism.plugins.lineNumbers.getLine = function (element, number) {
20+
if (element.tagName !== 'PRE' || !element.classList.contains('line-numbers')) {
21+
return;
22+
}
1723

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-
}
24+
var lineNumberRows = element.querySelector('.line-numbers-rows');
25+
var lineNumbers = lineNumberRows.querySelectorAll('span'); // added
26+
var lineNumberStart = parseInt(element.getAttribute('data-start'), 10) || 1;
27+
var lineNumberEnd = lineNumberStart + (lineNumbers.length - 1);
2728

29+
if (number < lineNumberStart) {
30+
number = lineNumberStart;
31+
}
32+
if (number > lineNumberEnd) {
33+
number = lineNumberEnd;
2834
}
29-
return result;
35+
36+
var lineIndex = number - lineNumberStart;
37+
38+
return lineNumbers[lineIndex];
3039
};
3140

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() {
52-
53-
$('span[line-highlight]').each(function(i, el) {
54-
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)) {
64-
65-
var cNames = $(el).attr('class');
66-
var str = nodeText.split('\n');
67-
var l = str.length;
68-
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);
41+
var padding = 3;
42+
var getConfig = function(lineString, lineCount) {
43+
var lines = lineString
44+
.split(',')
45+
.map(function(data) {
46+
return data.trim();
47+
})
48+
.filter(function(data) {
49+
return data;
50+
})
51+
;
52+
53+
var collapse = [];
54+
var index = lines.indexOf('only');
55+
if (index > -1) {
56+
lines.splice(index, 1);
57+
58+
var current = 1;
59+
for (var i = 0; i < lines.length; i++) {
60+
var range = lines[i]
61+
.split('-')
62+
.map(function(val) {
63+
return parseInt(val);
64+
})
65+
.filter(function(val) {
66+
return typeof val === 'number' && !isNaN(val);
67+
})
68+
;
69+
70+
if (range[0] > current + padding) {
71+
collapse.push(current + '-' + (range[0] - 1 - padding));
8372
}
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-
});
73+
74+
current = (range[1] || range[0]) + padding + 1;
14075
}
14176

142-
});
77+
if (current < lineCount) {
78+
collapse.push(current + '-' + lineCount);
79+
}
80+
}
81+
82+
return {
83+
lines: lines.length ? lines.join(',') : false,
84+
collapse: collapse.length ? collapse.join(',') : false,
85+
};
86+
};
87+
88+
function findPreviousSibling(el, tag) {
89+
tag = tag.toUpperCase();
90+
91+
while (el = el.previousSibling) {
92+
if (el.tagName && el.tagName.toUpperCase() === tag) {
93+
return el;
94+
}
95+
}
14396
}
14497

145-
module.exports = addHighlights;
98+
module.exports = function() {
99+
var highlights = document.querySelectorAll('span[line-highlight]')
100+
101+
for (var i = 0; i < highlights.length; i++) {
102+
var highlight = highlights[i];
103+
104+
var preBlock = findPreviousSibling(highlight.parentElement, 'pre');
105+
var codeBlock = preBlock.childNodes.item(0);
106+
107+
var total = codeBlock.innerHTML.split('\n').length - 1;
108+
var config = getConfig(highlight.getAttribute('line-highlight'), total);
109+
110+
if (preBlock) {
111+
preBlock.setAttribute('data-line', config.lines);
112+
113+
if (config.collapse) {
114+
preBlock.setAttribute('data-collapse', config.collapse);
115+
}
116+
}
117+
};
118+
};

‎package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"scripts": {
77
"preversion": "npm test",
88
"test": "mocha test.js --reporter spec",
9+
"release:pre": "npm version prerelease && npm publish --tag=pre",
910
"release:patch": "npm version patch && npm publish",
1011
"release:minor": "npm version minor && npm publish",
1112
"release:major": "npm version major && npm publish"
@@ -25,12 +26,13 @@
2526
},
2627
"homepage": "https://github.com/bit-docs/bit-docs-html-highlight-line#readme",
2728
"dependencies": {
28-
"jquery": "^2.2.4"
29+
"bit-docs-prettify": "^0.2.2-8",
30+
"prismjs": "^1.11.0"
2931
},
3032
"devDependencies": {
3133
"bit-docs-generate-html": "^0.1.0",
3234
"connect": "^2.14.4",
3335
"mocha": "^2.5.3",
34-
"zombie": "^4.2.1"
36+
"zombie": "^4.3.0"
3537
}
3638
}

0 commit comments

Comments
 (0)