Code highlighter: expand on mouse over
Written on 30 December 2011, 11:03am
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:
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.
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 🙂
Written by Dorin Moise (Published articles: 259)