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 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!
.
Vahid says:
Thanks for sharing.
April 5, 2013, 4:02 amI need it.
Cretu Eusebiu says:
Hi, this plugin is great but I have one problem, if I have more than one commented line this happens: http://i.imgur.com/9dYFsvZ.jpg. Any idea how I could fix that ?
April 7, 2013, 6:36 amThanks.
Danny says:
@Cretu Eusebiu:
April 7, 2013, 2:51 pmYes, that’s an odd bug I’ve noted but haven’t figured out yet. It seems to show up only if the first line is a comment; then subsequent comments that start on the first character aren’t counted. Simple workaround: add a space before the comment.
–Danny
Prism Syntax Highlighter | HazzardWeb says:
[…] am inclus plugin-ul Line Numbering, pentru a genera și o numerotare a liniilor, dar are mici probleme și de accea l-am dezactivat […]
April 8, 2013, 3:43 pmHacking at 0300 : Simpler line numbering plugin for Prism says:
[…] back at my line numbering plugin for Prism, I realized that it's working too hard by manipulating the DOM. Prism works by string manipulation […]
December 9, 2013, 10:53 am