Convert Code to HTML for Display on the Web

As an IT blogger, I often want to show a block of code or a configuration file in my articles.  The very first day I started blogging, I discovered that when I pasted script code on an html page, it immediately got butchered beyond recognition.

When you write code in a text editor, you often format it for readability, adding indents for code inside of functions, if statements, loops, etc.  HTML generally ignores these indents, so your code ends up all jammed to the left side of the screen.  To keep your indents, you must put your code within preformat tags.

Long lines tend to get wrapped to the next line, making your code confusing or even incorrect if someone tries to use it.  To keep your lines from wrapping, you must wrap your code in tags and apply a CSS style rule to the div, setting the overflow setting to auto.  This will put your code in a box with a horizontal scroll bar.

Then there's special characters.  The XHTML treats certain characters as special, interpreting them as control codes.  To display these characters on a web page, you must replace them with their corresponding XHTML codes, which are:

&lt; ( < )
&gt; ( > )
&amp; ( & )
&quot; ( " )
&39; ( ' )
&124; ( | )

Making all these changes by hand is tedious to say the least.  So I wrote a tool in .Net (I was using Windows at the time) to do it for me.  Since I started running Linux, I rewrote it in Python, but I realized it would be even more convenient to create a JavaScript version on the web so that my tool would be available on any machine I was using.  Below is the tool.  Just enter your code in the fisrt box and click Convert.  The output will appear in the second box.  At the bottom of the article, you can see the JavaScript code that makes it work.  Enjoy.

Input Text:

Output Text:

And here's the JavaScript code that makes this work:
<script language="javascript" type="text/javascript">
/* <![CDATA[ */
function converttext(){
 inputtext = document.getElementById('codeconverter').inputtext.value;
    out = inputtext.replace(/\&/g, '&amp;')
    out = out.replace(/\</g, '&lt;')
    out = out.replace(/\>/g, '&gt;')
    out = out.replace(/\"/g, '&quot;')
    out = out.replace(/\'/g, '&#39;')
    out = out.replace(/\|/g, '&#124;')
    out = '<div style="BORDER: #cccccc 1px dashed; PADDING: 5px; WIDTH: 95%; BACKGROUND: #f0f0f0; COLOR: #000000; FONT-SIZE: 12px; OVERFLOW: auto; height:auto"><pre>' + out + '</pre></div>'
 document.getElementById('codeconverter').outputtext.value = out;
/* ]]> */
<form id="codeconverter">
Input Text:<br />
<textarea name="inputtext" cols=80 rows=20></textarea><br />
<input onclick="javascript:converttext();" style="margin-top: 5px;" type="button" value="Convert" /><br />
Output Text:<br />
<textarea name="outputtext" cols=80 rows=20></textarea><br />


Expert Credit Sweeps said...

Hi, I tried using your converter and it doesn't seem to work for me, or I just don't get it. Either one. My website uses html5 (godaddy) and I have some .js code that I want to get onto the website, but when i enter the code (.js) it doesn't work. I tried using this, but when I enter in the converted code, it just shows the code, not the widget. Can you assist?

Brian said...

Hi Kristin, the purpose of this post is to show how to DISPLAY javascript on a webpage. So that, for example, we can blog about code.

Unknown said...

So does the converter above change my javascript into html text so i can paste it into my wordpress blog?

Its a great idea but its not working exactly the way i thought it would...


Brian said...

That's correct Mark. The converter makes your javascript displayable on an HTML page, so that you can blog about javascript.

Google Strategist said...

Nice one.

Post a Comment

Related Posts Plugin for WordPress, Blogger...