Expanded Code View Button with jQuery
October 10, 2014
We switched our static site generating platform over to Jekyll, which will be the subject of a post in the near future. For now all I can say is that I’m very impressed. So many cool features, one of which is the code highlighting with Pygment support right out of the box.
The problem
I did have one little issue with the default setup, and that was with overflowing code. If the code lines are longer than the Pygment highlight div, scrollbars are added to the bottom… which is a great default setting, but it can be a hassle if someone is trying to read your code and always scrolling.
The Solution
With the help of jQuery and my favorite jQuery light box plugin: fancybox2. I was able to accomplish the functionality I wanted pretty easily.
Code
1 $(document).ready(function() {
2 var counter = 0;
3 $(".highlight").each(function () {
4 var fancyBoxClass = "fancybox_highlight_" + counter.toString();
5 $("." + fancyBoxClass).fancybox({
6 content: $(this)[0].outerHTML
7 });
8 $(this).prepend(
9 "<div class='view_source'>"+
10 "<a class='" + fancyBoxClass + "' href='#'>"+
11 "<em>Expand</em> <i class='fa fa-plus'></i>"+
12 "</a>"+
13 "</div>"
14 );
15 counter++;
16 });
17 });Explanation
The basic play by play functionality is:
- Loop to assign unique classes to each code block (“.highlight”).
- Add div to the top of each code block with “expand” link.
- Assign fancybox lightbox to each link with the source for the code block.
Give it a go:
Click the “Expand +” button in the top right of the code pane below to see an example:
1 echo "hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo world!";