jquery为颜色代码文本

问题描述：

I give php code examples on my site and was wondering if their was a way I could colour code them so that it is easier to read like an IDE would do. I always display the code in a div with a class of code and then in pre tags. See my example below.

<div class="code">
   <pre>
      <?php
         echo 'hello world';
      ?>
   </pre>
</div>

I was wondering if there was a way to do it with jQuery like in a sort of string match way. So give jquery an array of strings that should be blue for example, and then jQuery would look through the code blocks and any words that match it adds a class of blue to them or something? Anyone know of how I would achieve this? Maybe there is a much simpler way already?

Thanks

我在我的网站上提供php代码示例，并想知道他们是否可以对它们进行颜色编码以便它像IDE一样容易阅读。我总是在一个div中用一类代码然后在pre标签中显示代码。请参阅下面的示例。 p>

 ＆lt; div class =“code”＆gt; 
＆lt; pre＆gt; 
＆lt;？php 
 echo'hello world'; \  n？＆gt; 
＆lt; / pre＆gt; 
＆lt; / div＆gt; 
  code>  pre> 
 
 我想知道是否有办法在jQuery中使用jQuery 一种字符串匹配方式。 所以给jquery一个字符串数组，例如应该是蓝色的，然后jQuery会查看代码块，任何与之匹配的单词都会为它们添加一类蓝色或其他东西？ 有谁知道我会怎么做到这一点？ 也许有一个更简单的方法？   p> 
 
 
谢谢 p> 
  div>

答

There are numerous different scripts that can do this - I wouldn't recommend you try to do it yourself unless you want a little project for yourself :)

A syntax highlighter that I use is: http://alexgorbatchev.com/SyntaxHighlighter/

In most cases, you just have to add a class (like php) to the element that you want highlighted. For SyntaxHighlighter, your code would look like:

<pre class="brush: php">
  echo "Hello";
</pre>

答

The correct term for this is "syntax highlighting", and there's some useful scripts available:

http://www.webdesignbooth.com/9-useful-javascript-syntax-highlighting-scripts/

相关推荐