Plugin Číslo prism Line

Mozilla Developer Network (MDN) je uprostřed přestavby (omlouvám se za spoiler) a funkce implementujeme postupně. Jednou větší změnou front-endu, kterou budeme implementovat, je použití PrismJS pro zvýraznění syntaxe kódu dokumentu. Jedním z požadavků zvýrazňovače syntaxe MDN je zobrazení čísel řádků, což je funkce, kterou Prism neposkytuje. Prism poskytuje plugin pro zvýraznění řádků, ale ne plugin pro číslování řádků, takže jsem tento plugin použil jako svůj základ a jednoduše jsem ho zjednodušil tak, aby poskytoval čísla pro řádky.

CSS

CSS zde je zkopírováno z pluginu pro zvýraznění řádků. Změnil jsem atribut na data-number, který budeme používat místo data-line, a změnil jsem barvy použité pro pozadí řádku:

pre[data-number] {
	position: relative;
	padding: 1em 0 1em 3em;
}

.line-number {
	position: absolute;
	left: 0;
	right: 0;
	padding: inherit 0;
	margin-top: 1em; /* Same as .prism's padding-top */

	background: transparent;
	
	pointer-events: none;
	
	line-height: inherit;
	white-space: pre;
}

	.line-number:before,
	.line-number[data-end]:after {
		content: attr(data-start);
		position: absolute;
		top: .4em;
		left: .6em;
		min-width: 1em;
		padding: 0 .5em;
		color: #999;
		font: bold 65%/1.5 sans-serif;
		text-align: center;
		vertical-align: .3em;
		border-radius: 999px;
		text-shadow: none;
		border: 0;
	}
	
	.line-number[data-end]:after {
		content: attr(data-end);
		top: auto;
		bottom: .4em;
	}

Samozřejmě můžete stylizovat prvek čísla řádku, jak chcete, ale tento CSS zachovává styly poměrně konzistentní s pluginem pro zvýraznění řádků.

JavaScript

Zde je část JavaScriptu pro plugin v celé jeho kráse:

/*
	This plugins was created based on the Prism line-numbering plugin.
	This plugin aims to number all lines and is independent of highlighting.
*/
(function(){

if(!window.Prism || !document.querySelectorAll) {
	return;
}

function $$(expr, con) {
	return Array.prototype.slice.call((con || document).querySelectorAll(expr));
}
    
function numberLines(pre) {
	var offset = +pre.getAttribute('data-line-offset') || 0;
	var lineHeight = parseFloat(getComputedStyle(pre).lineHeight);
	var code = pre.querySelector('code');
	var numLines = code.innerHTML.split('\n').length;
	pre.setAttribute('data-number', '');

	for (var i=1; i <= numLines; i++) {
		var line = document.createElement('div');
		line.className = 'line-number';
		line.setAttribute('data-start', i);
		line.style.top = (i - offset - 1) * lineHeight + 'px';
		
		(code || pre).appendChild(line);
	}
}

Prism.hooks.add('after-highlight', function(env) {
	var pre = env.element.parentNode;
	
	if (!pre || !/pre/i.test(pre.nodeName)) {
		return;
	}

	$$('.line-number', pre).forEach(function (line) {
		line.parentNode.removeChild(line);
	});
	
	numberLines(pre);
});

})();

Tento kód je také založen na kódu pluginu pro zvýraznění syntaxe, ale je mnohem jednodušší, protože je zde méně logiky číslování řádků.

Pokud je o to, co mám, dostatečný zájem, mohu pro plugin vytvořit repo GitHub. Dosud jsem to neudělal, protože se domnívám, že by tento plugin mohl/měl být sloučen s pluginem pro zvýraznění řádků, protože v mnoha případech vývojáři odkazují na čísla řádků. V každém případě může být tento plugin to, co hledáte. Dejte mi vědět, pokud máte aktualizace nebo nápady!