Simple conditional formatting with CSS and JavaScript

Today, I wanted to make sections of shell commands in my blog stand out more clearly from other examples like program code or sample files. To do that, I decided to add some JavaScript to my site that automatically assigns a special CSS class to preformatted code sections containing shell code:
var shells = document.getElementsByTagName('pre');
for (var sh = shells.length - 1; sh != -1; --sh) {
	var txt = shells[sh].firstChild.textContent;
	if ('CODE' === shells[sh].firstChild.nodeName &&
		('$' === txt[0] || '#' === txt[0]) &&
		' ' === txt[1])
	{
		shells[sh].className = 'shell';
	}
}
Sections illustrating shell code are recognisable because the first line starts either with '$' for a user shell or '#' for a root shell, except scripts that start with a shebang.

Comments