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