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
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

  • 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
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

  • By
    MooTools Star Ratings with MooStarRating

    I've said it over and over but I'll say it again:  JavaScript's main role in web applications is to enhance otherwise boring, static functionality provided by the browser.  One perfect example of this is the Javascript/AJAX-powered star rating systems that have become popular over 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!