Question

I am using JQuery Syntax highlighter in my asp.net application.

http://www.steamdev.com/snippet/

I have included the scripts and CSS file as mentioned in the USAGE section.

Also the below code:

<script>
 $(document).ready(function(){  $("pre.htmlCode").snippet("html"); 
     // Finds <pre> elements with the class "htmlCode"     
     // and snippet highlights the HTML code within.
       $("pre.styles").snippet("css",{style:"greenlcd"}); 
           // Finds <pre> elements with the class "styles" 
               // and snippet highlights the CSS code within
                    // using the "greenlcd" styling.  
      $("pre.js").snippet("javascript",{style:"random",transparent:true,showNum:false});     
      // Finds <pre> elements with the class "js"     
      // and snippet highlights the JAVASCRIPT code within     
      // using a random style from the selection of 39     
      // with a transparent background     
      // without showing line numbers.
   });

</script>
<script>
$(document).ready(function(){
      $("pre#dynamic").snippet("php",{style:"navy",clipboard:"js/ZeroClipboard.swf",showNum:false});
               // Highlights a snippet of PHP code with the "navy" style         
               // Hides line numbers      
               $("pre#dynamic").click(function(){
                        $(this).snippet({style:"vampire",transparent:true,showNum:true});       
                          // Changes existing snippet's style to "vampire"         
                          // Changes the background to transparent         
                          // Shows line numbers  
   }); 



    }); 



</script>

Result: I am getting the code section like below

But the code is going out from the highlighter, also I have no option of copy clicpboard.

How to include that into my page?

While inserting the data I have used <pre></pre> tag only. Do I need to specify the language in pre? Because I am also not getting the color code

EDIT

I am calling the JS and CSS file like the below

 <link href="jquery.snippet.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript" src="<%=ResolveUrl("~/JS/jquery.snippet.js")%>" ></script>

EDIT1

It is in collapse mode and when I clicked on “text” link I can see all formating are gone. Any suggestion how can I keep the HTML mode in expand format?

Answer 1

I think you might have to specify the language in the class of the pre element, eg:

<pre class="htmlCode">
   //...code snippet here
</pre>

The code you posted looks for the following:

<pre class="htmlCode">...</pre> <!-- html -->
<pre class="styles">...</pre>  <!-- css -->
<pre class="js">...</pre>  <!-- javascript -->
<pre id="dynamic">...</pre>  <!-- php -->

EDIT

To add c#, you’d probably have to do:

<pre class="csharp">
    public static void Main(string[] args)
    {
         Console.WriteLine("Hello World");
         Console.ReadLine();
    }
</pre>
<script>
     $("pre.csharp").snippet("csharp");
</script>

NOTE it’s easier to use csharp rather than c# as the language name, as # has a special meaning on the web.