Question

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

Answer 1

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>