JQuery语法荧光笔片段

时间:2011-03-24 13:32:45

标签: jquery asp.net syntax-highlighting

我在我的asp.net应用程序中使用JQuery Syntax荧光笔。

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

我已经包含了USAGE部分中提到的脚本和CSS文件。

以下代码:

<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>

结果:我收到的代码部分如下

Code highlighting

但代码是从荧光笔出来的,我也没有选择复制clicpboard的选项。

如何将其纳入我的页面?

插入数据时,我只使用了<pre></pre>标记。我需要在pre中指定语言吗?因为我也没有得到颜色代码

修改

我正在调用JS和CSS文件,如下所示

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

EDIT1

它处于崩溃模式,当我点击“文本”链接时,我可以看到所有格式化都消失了。任何建议如何以扩展格式保持HTML模式?

enter image description here

1 个答案:

答案 0 :(得分:0)

我认为您可能必须在pre元素的类中指定语言,例如:

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

您发布的代码会查找以下内容:

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

修改

要添加c#,您可能需要执行以下操作:

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

注意 使用csharp而不是c#作为语言名称更容易,因为#在网络上具有特殊含义。