Creating Expandable Syntax Code Containers – SyntaxHighlighter Evolved

One of my pet peeves with sites that share code is that often snippets will be hard to copy, taking in markup or line numbers, or the fact that it’s just too hard to read on the website due to sizing. For this blog I have been using SyntaxHighlighter Evolved which works well. My only issue was when I switched to a thinner design it hurt readability of code when crunched down in width. Also, nobody likes scroll-bars. You can see the code blocks below, on a browser that is wide enough the upper right corner will contain an expand button.

The design of this blog (at the time of this writing) is a div container of set maximum width of about 800px, on larger desktop screens there is often much more real estate to be used. The issue is that expanding CSS elements outside of their parents can often be an issue, as well as trying to keep things fluid. If you are attempting anything similar, I would suggest reading into this stackoverflow posting which has some good content inside. With this knowledge, I was able to add expanding code blocks into my theme. Below is code for anyone looking to implement similar functionality.

Implementation

This script requires use of Bootstrap v3 and jQuery and may require tweaks depending on your preferences.

Javascript

$(document).ready(function(){
	var syntaxAreas = [];
	
	//Find all PRE tags with class starting with brush:
	$('pre').each(function(i,e){
		if($(e).attr('class').toLowerCase().indexOf('brush:') == 0)
			syntaxAreas.push(e);
	});
	
	//In case this script runs too late, the code blocks will no longer be PRE but div with class .syntaxhighlighter
	$.merge(syntaxAreas, $('.syntaxhighlighter'));
	
	//Loop through all code blocks on page and surround with a parent container and add expand button
	$(syntaxAreas).each(function(i, e){
		var area_id = "syntax_area_" + i;
		$(e).wrap("<div id='" + area_id + "' class='syntax_widen'></div>");
		$(e).parent().append("<button onclick='expand_syntax_zone(\"" + area_id + "\");' type='button' class='btn btn-default navbar-btn expandSyntaxBtn'><span class='glyphicon glyphicon glyphicon-resize-horizontal'></span>Expand</button>");		
	});	
});

//Any functionality to be done after expand button is clicked
function expand_syntax_zone(id){
	$("#" + id).toggleClass('syntaxhighlighter_expand');
}

CSS:

.expandSyntaxBtn { display:none; transition: opacity .25s ease-in-out;}
.expandSyntaxBtn span { padding-right: 6px; }

.syntax_widen{
	transition-property: all;
	transition-duration: 1s;
	transition-delay: 0s;
	width: 100%;
	position: relative;
	left: 0%;
}

@media(min-width:1200px) {
	/* User clicked expand */
	.syntaxhighlighter_expand{
		left:75%;
		width: 80vw;
		margin-left:-50vw;
	}
	
	.expandSyntaxBtn{
		display: block;
		font-size:10px;
		padding: 2px 6px;
		position: absolute;
		right: 10px;
		top: 10px;
		opacity: .3;
	}
	
	.syntax_widen:hover .expandSyntaxBtn{
		opacity: .8;
	}
}