CODEWITHSUNDEEP
phpjquery
geoffs3310
geoffs3310

Reputation: 14008

jquery to color code text

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

Upvotes: 2

Views: 1225

Answers (2)

Jonathon Bolster
Jonathon Bolster

Reputation: 15961

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>

Upvotes: 3

Stephan Muller
Stephan Muller

Reputation: 27630

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/

Upvotes: 2

Related Questions