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

StackOverflow https://stackoverflow.com/questions/20832027

Domanda

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

È stato utile?

Soluzione

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/

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top