How to add line numbers when using google prettify in the nocode class?

Question

How to add line numbers when using google prettify in the nocode class?

1.9k views Asked by Nasser At 30 December 2013 at 01:15

related How to add line numbers to all lines in Google Prettify?

I am looking at google's http://code.google.com/p/google-code-prettify/ to display come code I have written in Mathematica inside a web page.

Mathematica is not supported language. So, even thought I can do the following

<pre class="prettyprint linenums">
Manipulate[
 tick;
 Module[{a1, a2, a3, v1, v2, v3, h1, a1d, a2d, a3d, z},
]
</pre>

and that works in terms of showing the line numbers, but the syntax highlighting used is off and not correct for the language I am using, since it is not supported of course which I understand.

I'd be happy just to list the code, using the nocode class, without having the highlighting, but I like to also be able to get line numbers. So, I tried this:

<pre class="prettyprint linenums"> 
<span class="nocode">  <!-- also tried <span class="nocode linenums"--->
Manipulate[
 tick;
 Module[{a1, a2, a3, v1, v2, v3, h1, a1d, a2d, a3d, z},
</span>
</pre>

but the lines numbers do not show inside the nocode class.

Is there a way to modify prettify.js and make it also show the line numbers for nocode? I will mainly be using it to list the code, but need to see line numbers.

Here is a complete MWE

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8"/> 
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
</head>
<body onload="prettyPrint()">        

<pre class="prettyprint linenums">
<span class="nocode linenums">
Manipulate[
 tick;
 Module[{a1, a2, a3, v1, v2, v3, h1, a1d, a2d, a3d, z},

  Which[state == "init" || state2 == "on",
   state2 = "off";
   If[state == "init", state = "paused"];  
 state == "running" || state == "step",
   If[currentTime > maxTime, currentTime = 0]
   ]; 
]
</span>
</pre>

</body>
</html>

update

thanks to Gaby, it is working now. Here is the final result

enter image description here

Original Q&A

There are 1 answers

**Gabriele Petrioli** · Accepted Answer · 2013-12-30 01:44:22

Put the nocode class on the pre element..

<pre class="prettyprint linenums nocode">

Demo at http://jsfiddle.net/gaby/8Jwja/1/

Update

To show all numbers (and show them without the dot after the number) you will have to override the CSS

Add

ol.linenums{
    counter-reset:linenumber;
}
ol.linenums li{
    list-style-type:none;
    counter-increment:linenumber;
}
ol.linenums li:before{
    content: counter(linenumber);
    float:left;
    margin-left:-4em;
    text-align:right;
    width:3em;
}

Demo at http://jsfiddle.net/gaby/8Jwja/2/

TechQA.

How to add line numbers when using google prettify in the nocode class?

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in PRETTIFY

Related Questions in GOOGLE-CODE-PRETTIFY

Popular Questions

Popular Tags

Trending Questions