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
Post a Comment