Skip to content

Commit

Permalink
Fixes to compatibility of line number and line higlight plugins (#1194)
Browse files Browse the repository at this point in the history 
* Fix line breaks issues in line numbers plugin used with soft wraps option

* Fix line highlight plugin compatibility issues with line number plugin

* Revert rename data attribute for line numbers plugin

* Fix compatibility issues with line highlight and line numbers
  • Loading branch information
@VitaliyR @Golmote
VitaliyR authored and Golmote committed Dec 5, 2017
1 parent ac219d7 commit e63058f
Show file tree
Hide file tree
Showing 3 changed files with 100 additions and 21 deletions.
5 changes: 5 additions & 0 deletions plugins/line-highlight/prism-line-highlight.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,3 +42,8 @@ pre[data-line] {
top: auto;
bottom: .4em;
}

.line-numbers .line-highlight:before,
.line-numbers .line-highlight:after {
content: none;
}
53 changes: 41 additions & 12 deletions plugins/line-highlight/prism-line-highlight.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,37 +36,53 @@ var isLineHeightRounded = (function() {
}());

function highlightLines(pre, lines, classes) {
lines = typeof lines === 'string' ? lines : pre.getAttribute('data-line');

var ranges = lines.replace(/\s+/g, '').split(','),
offset = +pre.getAttribute('data-line-offset') || 0;

var parseMethod = isLineHeightRounded() ? parseInt : parseFloat;
var lineHeight = parseMethod(getComputedStyle(pre).lineHeight);
var hasLineNumbers = hasClass(pre, 'line-numbers');

for (var i=0, range; range = ranges[i++];) {
range = range.split('-');
for (var i=0, currentRange; currentRange = ranges[i++];) {
var range = currentRange.split('-');

var start = +range[0],
end = +range[1] || start;

var line = document.createElement('div');
var line = pre.querySelector('.line-highlight[data-range="' + currentRange + '"]') || document.createElement('div');

line.textContent = Array(end - start + 2).join(' \n');
line.setAttribute('aria-hidden', 'true');
line.setAttribute('data-range', currentRange);
line.className = (classes || '') + ' line-highlight';

//if the line-numbers plugin is enabled, then there is no reason for this plugin to display the line numbers
if(!hasClass(pre, 'line-numbers')) {
if(hasLineNumbers && Prism.plugins.lineNumbers) {
var startNode = Prism.plugins.lineNumbers.getLine(pre, start);
var endNode = Prism.plugins.lineNumbers.getLine(pre, end);

if (startNode) {
line.style.top = startNode.offsetTop + 'px';
}

if (endNode) {
line.style.height = (endNode.offsetTop - startNode.offsetTop) + endNode.offsetHeight + 'px';
}
} else {
line.setAttribute('data-start', start);

if(end > start) {
line.setAttribute('data-end', end);
}
}

line.style.top = (start - offset - 1) * lineHeight + 'px';

line.style.top = (start - offset - 1) * lineHeight + 'px';
line.textContent = new Array(end - start + 2).join(' \n');
}

//allow this to play nicely with the line-numbers plugin
if(hasClass(pre, 'line-numbers')) {
if(hasLineNumbers) {
//need to attack to pre as when line-numbers is enabled, the code tag is relatively which screws up the positioning
pre.appendChild(line);
} else {
Expand Down Expand Up @@ -133,7 +149,7 @@ Prism.hooks.add('before-sanity-check', function(env) {
}
});

Prism.hooks.add('complete', function(env) {
Prism.hooks.add('complete', function completeHook(env) {
var pre = env.element.parentNode;
var lines = pre && pre.getAttribute('data-line');

Expand All @@ -142,11 +158,24 @@ Prism.hooks.add('complete', function(env) {
}

clearTimeout(fakeTimer);
highlightLines(pre, lines);

fakeTimer = setTimeout(applyHash, 1);
var hasLineNumbers = Prism.plugins.lineNumbers;
var isLineNumbersLoaded = env.plugins && env.plugins.lineNumbers;

if (hasLineNumbers && !isLineNumbersLoaded) {
Prism.hooks.add('line-numbers', completeHook);
} else {
highlightLines(pre, lines);
fakeTimer = setTimeout(applyHash, 1);
}
});

window.addEventListener('hashchange', applyHash);
window.addEventListener('resize', function () {
var preElements = document.querySelectorAll('pre[data-line]');
Array.prototype.forEach.call(preElements, function (pre) {
highlightLines(pre);
});
});

})();
})();
63 changes: 54 additions & 9 deletions plugins/line-numbers/prism-line-numbers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,20 @@
}

/**
* Class name for <pre> which is activating the plugin
* Plugin name which is used as a class name for <pre> which is activating the plugin
* @type {String}
*/
var PLUGIN_CLASS = 'line-numbers';
var PLUGIN_NAME = 'line-numbers';

/**
* Regular expression used for determining line breaks
* @type {RegExp}
*/
var NEW_LINE_EXP = /\n(?!$)/g;

/**
* Resizes line numbers spans according to height of line of code
* @param {Element} element <pre> element
* @param {Element} element <pre> element
*/
var _resizeElement = function (element) {
var codeStyles = getStyles(element);
Expand All @@ -22,7 +28,7 @@
var codeElement = element.querySelector('code');
var lineNumbersWrapper = element.querySelector('.line-numbers-rows');
var lineNumberSizer = element.querySelector('.line-numbers-sizer');
var codeLines = element.textContent.split('\n');
var codeLines = codeElement.textContent.split(NEW_LINE_EXP);

if (!lineNumberSizer) {
lineNumberSizer = document.createElement('span');
Expand Down Expand Up @@ -57,7 +63,7 @@
};

window.addEventListener('resize', function () {
Array.prototype.forEach.call(document.querySelectorAll('pre.' + PLUGIN_CLASS), _resizeElement);
Array.prototype.forEach.call(document.querySelectorAll('pre.' + PLUGIN_NAME), _resizeElement);
});

Prism.hooks.add('complete', function (env) {
Expand All @@ -76,21 +82,21 @@
return;
}

if (env.element.querySelector(".line-numbers-rows")) {
if (env.element.querySelector('.line-numbers-rows')) {
// Abort if line numbers already exists
return;
}

if (clsReg.test(env.element.className)) {
// Remove the class "line-numbers" from the <code>
// Remove the class 'line-numbers' from the <code>
env.element.className = env.element.className.replace(clsReg, ' ');
}
if (!clsReg.test(pre.className)) {
// Add the class "line-numbers" to the <pre>
// Add the class 'line-numbers' to the <pre>
pre.className += ' line-numbers';
}

var match = env.code.match(/\n(?!$)/g);
var match = env.code.match(NEW_LINE_EXP);
var linesNum = match ? match.length + 1 : 1;
var lineNumbersWrapper;

Expand All @@ -109,6 +115,45 @@
env.element.appendChild(lineNumbersWrapper);

_resizeElement(pre);

Prism.hooks.run('line-numbers', env);
});

Prism.hooks.add('line-numbers', function (env) {
env.plugins = env.plugins || {};
env.plugins.lineNumbers = true;
});

/**
* Global exports
*/
Prism.plugins.lineNumbers = {
/**
* Get node for provided line number
* @param {Element} element pre element
* @param {Number} number line number
* @return {Element|undefined}
*/
getLine: function (element, number) {
if (element.tagName !== 'PRE' || !element.classList.contains(PLUGIN_NAME)) {
return;
}

var lineNumberRows = element.querySelector('.line-numbers-rows');
var lineNumberStart = parseInt(element.getAttribute('data-start'), 10) || 1;
var lineNumberEnd = lineNumberStart + (lineNumberRows.children.length - 1);

if (number < lineNumberStart) {
number = lineNumberStart;
}
if (number > lineNumberEnd) {
number = lineNumberEnd;
}

var lineIndex = number - lineNumberStart;

return lineNumberRows.children[lineIndex];
}
};

}());

0 comments on commit e63058f

Please sign in to comment.