Prism Line Number Plugin

By  on  

The Mozilla Developer Network (MDN) is in the midst of a remodel (sorry for the spoiler) and we've been implementing features incrementally.  One larger front-end change we'll be implementing is using the PrismJS for document code syntax highlighting.  One requirement of MDN's syntax highlighter is that line numbers are displayed, a functionality not provided by Prism.  Prism does provide a line-highlighting plugin but not a line-numbering plugin, so I used that plugin as my base and simply simplified it to provide numbers for a lines.

The CSS

The CSS here is copied from the line-highlighting plugin.  I've changed the attribute to data-number, which we'll use instead of data-line, and I've changed the colors used for the line background:

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;
	}

Of course you can style the line number element to however you'd like, but this CSS keeps styles fairly consistent with the line-highlighting plugin.

The JavaScript

Here's the JavaScript portion for the plugin in all its glory:

/*
	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);
});

})();

This code is also based on the syntax-highlighting plugin's code, but much more simplified because there's less line-numbering logic.

If there's enough interest in what I have, I can make a GitHub repo for the plugin.  I haven't to this point because I believe this plugin could/should be merged with the line-highlighting plugin, since in many cases, developers reference line numbers.  In any event, this plugin may be what you're looking for.  Let me know if you have updates or ideas!

Recent Features

  • By
    Interview with a Pornhub Web Developer

    Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

Incredible Demos

  • By
    MooTools Accordion: Mouseover Style

    Everyone loves the MooTools Accordion plugin but I get a lot of requests from readers asking me how to make each accordion item open when the user hovers over the item instead of making the user click. You have two options: hack the original plugin...

  • By
    CSS Fixed Positioning

    When you want to keep an element in the same spot in the viewport no matter where on the page the user is, CSS's fixed-positioning functionality is what you need. The CSS Above we set our element 2% from both the top and right hand side of the...

Discussion

  1. Jonas

    This fails in WebKit, as getComputedStyle(pre).lineHeight returns ‘normal’.
    See also: https://github.com/LeaVerou/dabblet/pull/175

    • Ahh yes Jonas; I encountered that issue and explicitly set a line-height within a different stylesheet so as to avoid this issue.

  2. Maybe you missed it, but PrismJS does have a line numbering plugin. More info can be found on http://prismjs.com/plugins/line-numbers/

    • Hmm, that may be new. Thanks Mark!

    • So I just took a look at this and the line-numbers plugin isn’t compatible with the line-highlight plugin; mine is.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!