Inspired by the article A Design Is Only As Deep As It Is Usable featured in the e-book Modern Web Design & Development – I decided to make the blocks of code on this WordPress-powered blog expandable on mouse over. As you will see soon, unfortunately this is not an easy job.

1. Syntax Highlighting

Let’s get back a little. When it comes to syntax highlighting, you have 2 main options:

1. Alex Gorbatchev’s SyntaxHighlighter
2. GeSHi – Generic Syntax Highlighter

They both support ColdFusion syntax, and they are both featured in WordPress plugins. Because of the better functionalities, ease of use and because it simply looks better, when I started this blog I decided to use the SyntaxHighlighter – by installing the SyntaxHighlighter Evolved WordPress plugin. This allowed me to simply add ColdFusion code by simply wrapping the code in [ cf ] ...[ /cf ] markers. I solved the long lines problem by using the ‘wrap long lines’ option, as shown below:

2. Expand the code

Fast forward to today. Check the example in the Smashing Mag article – not working. Google for other example – found only this solution. The main problem with this solution is that it’s not expanding the code formatted by SyntaxHighlighter. It only expands blocks of code formatted with <pre><code> ... </code></pre>. It is also using an old version of SyntaxHighlighter plugin.

I made a test on my server:

I tried to manipulate the SyntaxHighlighter library, to make it include the jQuery solution of expanding the code block on mouse over, but unfortunately I was not able to do it.

3. Conclusion

So far, I found no way of having both Syntax Highlighter active and expandable on mouse over. Maybe in future versions of SyntaxHighlighter. Or any other solution?

Update 17 Feb 2018: all changed, I started using Prism 🙂