Skip to content

Line Numbering Plugin for Prism

Updated 2013-12-09 to use much simpler code

One thing that is nice about Prism is that it provides hooks to extend the syntax highlighting, so it is straightforward to create a plugin that adds features like my line numbering, so I can do things like:

<pre><code class="language-javascript" data-linenumber=4>
function foo(arg){
  console.log('You said: '+arg);
}</code></pre>

Download the code.

Download the CSS (the linenumbering parts are at the bottom).

See an example (working together with the line highlighting plugin)(note that Chrome requires an explicit line-height on the <pre> to work).

You use the plugin simply by including the script after loading Prism, then adding the data-linenumber attribute to the code element, as in <code class="language-javascript" data-linenumber><code>. The default first line is 0 (we're computer scientists after all!). Change it by assigning a value to the data-linenumber attribute, as in <code class="language-javascript" data-linenumber=4><code>.

As I discussed before, the code element must have a style of counter-reset: something and each line is wrapped in a <span class="line"> element, and those must have a style of counter-increment: something. Then the span.line:before selector needs a style of content: counter(something).

Hope this helps someone!

.

{ 3 } Comments


  1. Fatal error: Uncaught Error: Call to undefined function ereg() in /home/public/blog/wp-content/themes/barthelme/functions.php:178 Stack trace: #0 /home/public/blog/wp-content/themes/barthelme/comments.php(34): barthelme_commenter_link() #1 /home/public/blog/wp-includes/comment-template.php(1469): require('/home/public/bl...') #2 /home/public/blog/wp-content/themes/barthelme/single.php(44): comments_template() #3 /home/public/blog/wp-includes/template-loader.php(74): include('/home/public/bl...') #4 /home/public/blog/wp-blog-header.php(19): require_once('/home/public/bl...') #5 /home/public/blog/index.php(17): require('/home/public/bl...') #6 {main} thrown in /home/public/blog/wp-content/themes/barthelme/functions.php on line 178