I used
highlight.js on my site. Pretty simple to install and has several themes to choose from.
It’s fairly simple to get going, but I did find that I have to explicitly specify the class for the <code> tags. So, for example, in my <head> section of my template, I included the files as follows (once I’d copied them to my install):
<link href="assets/js/highlight/styles/zenburn.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="assets/js/highlight/highlight.pack.js"></script>
<script type="text/javascript">
hljs.initHighlightingOnLoad('php,html,css,sql');
</script>
Basically, that initializes highlight.js and sets what code formats hightlight.js will recognize and which CSS theme to use.
Then, when adding code tags, I add a CSS class that highlight.js can hook on to:
<pre>
<code class="php">
... code here ...
</code>
</pre>
Strictly speaking, the CSS class shouldn’t be required but I found that highlight.js didn’t always highlight correctly unless I added it explicitly.
Hope that helps (and makes sense)!
MODX Staff
☆ A M B ☆
MODX Staff
Let me know if you have any problems with it - I’ve tested the plugin quite a lot on the modx360 blog so hopefully it should work with pretty much any code samples you throw at it.