HTML code displayed in a scroll box

A few readers have asked how to put HTML codes inside a scroll box so that readers can copy the codes to paste it into their own blogs (example see 4 column Minima template. First thing you have to know is that if you try to type the HTML as it is (example <br />), the web browser will interpret that as an instruction to display what follows in a new line (line break) but not display the HTML. What I did to display the above was to type . In other words, replace < with and replace > with

How to display HTML codes inside scroll box

Now on how to display HTML codes inside a scroll box. First, the script for a scroll box:

<div style="width: 395px; height: 400px; background-color: a0ffff; color: 000000; font-family: arial; font-size: 12px; text-align: left; border: 0px solid 00000; overflow: auto; padding: 4px;"></div>

I have the script for the scroll box save in a notepad file to be retrieved whenever I need to use it. Now, to explain how I displayed the HTML codes for the scroll box. I paste whatever HTML codes I want to display into a notepad file. Then I click EDIT in the menu bar and select "Replace..." and then type > into the "Find what:" box followed by < into the "Replace with:" box (see screen shot below:

and then click "Replace all". Notepad will find all the < characters in the file and replace it with automatically. I repeat with >, that is, type > into the "Find what:" box and into the "Replace with:" box and click "Replace all".

Thanks to DarkUFO, found a slightly easier way of encoding the HTML codes for display at encode HTML entities. What you have to do is to paste the HTML codes in between <em></em> and click "encode", then proceed as usual.

Once all the < and > had been replaced, I copy the edited file in Notepad and paste the edited HTML codes into the scroll box by pasting it in between >< in the script for the scroll box. I will then edit the width and height (in red) to suit the width of my main column and a suitable height to accommodate the length of the HTML codes I want to display. For example, the width (in red) is already set to 395 which is what I want, so I leave it alone. I edited height="400" to height="39", publish, done.