I’m working on a data mining framework library and hit an old problem revisited many times across the Web: how to display HTML code on a page. Thanks to JQuery Syntax Highlighter and similar editors, this is easy to do.
This prompted me to search for even a simpler solution without all the nice features of these editors, but one that just does the mere work of showing code. I came up with the following strategy, tested on recent versions of IE, Opera, Chrome, Safari, and Firefox. I haven’t tested it with older browser versions and cannot claim it will work with those. More tests are necessary to please other programming/validation requirements.
1. Place HTML code into a hidden textarea.
2. Show it with the following javascript one-line snippet
document.getElementById(‘id’).innerHTML=”<pre><code>”+document.getElementsByTagName(‘textarea’)[index].innerHTML+”</code></pre>”;
Optionally, both the textarea and snippet can be placed right before the closing body tag.
In the snippet, id is the identifier given to a tag container used to show the html code. This container can be a division placed at will in the body section of the document and CSS styled to your heart needs. The index parameter is the index value of the textarea; i.e. [0] if there is only one textarea in the page, [1] if it is the second textarea, and so forth.
When the textarea is replaced by a noscript tag, the snippet seems to work with the above browsers, except with firefox (particularly if the html code itself contains script tags).
PS.
If you care about semantics and SEO, simply move the <pre> and <code> tags from the snippet to the division container. Then add the id to the code tag instead of to the division container, like this:
<div><pre><code id=’id’></code></pre></div>
This makes the snippet even shorter, like this:
document.getElementById(‘id’).innerHTML=document.getElementsByTagName(‘textarea’)[index].innerHTML;
This isolates programming from presentation, which is always a good practice.
PS2 I added single quotes in snippet, so if you simply copy/paste it won’t flag you an error.
