Wednesday, November 19, 2008

Scrollable, non-editable text box

I think I just spent like 1.5 - 2 hours of my (work) time, figuring out how to make a scrollable, non-editable text box that displays code. If you look at my previous post, I had black boxes that display a single line of code in each. I had trouble displaying multiple lines of code on here. At one point, I would get it to scroll but it was editable and then after that it would not scroll but it'd be non-editable. INSANE.

The code you want displayed probably looks like this "<html>" with the arrows. If you wanted to display this (instead of rendering it), you'd have to replace the less than sign with the character entity &lt; and the same with the greater than sign &gt;. If you did "<html>", it'll get rendered and that's not what you want.

Here is some (sample) code that makes the scrollable, non-editable text box:

<pre class="code">
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Welcome to my site!&gt;&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;p&gt;HELLO WORLD&lt;/p&gt;
      &lt;p&gt;HELLO WORLD&lt;/p&gt;
      &lt;p&gt;HELLO WORLD&lt;/p&gt;
      &lt;p&gt;HELLO WORLD&lt;/p&gt;
      &lt;p&gt;HELLO WORLD&lt;/p&gt;
      &lt;p&gt;HELLO WORLD&lt;/p&gt;
      &lt;p&gt;HELLO WORLD&lt;/p&gt;
      &lt;p&gt;HELLO WORLD&lt;/p&gt;
      &lt;p&gt;HELLO WORLD&lt;/p&gt;
      &lt;p&gt;HELLO WORLD&lt;/p&gt;
    &lt;/body&gt;
  &lt;/html&gt;
</pre>


The results that will be displayed on your page:

<html>
  <head>
    <title>Welcome to my site!></title>
  </head>
  <body>
    <p>HELLO WORLD</p>
    <p>HELLO WORLD</p>
    <p>HELLO WORLD</p>
    <p>HELLO WORLD</p>
    <p>HELLO WORLD</p>
    <p>HELLO WORLD</p>
    <p>HELLO WORLD</p>
    <p>HELLO WORLD</p>
    <p>HELLO WORLD</p>
    <p>HELLO WORLD</p>
  </body>
</html>


To make it look nice, we'll use some CSS. Feel free to use my code and modify to your own liking. My "code" class looks like this:
.code {
  width: 450px;
  height: auto;
  background-color: #000000;
  color: #FFFFFF;
  font-family: Georgia, "Times New Roman", Times, serif;  
  border: 1px dashed #FFFFFF;
  padding: 6px 3px 6px 3px;
  margin-left: 15px;
  overflow: auto;
}


So, today, I've learned two new things already... favicons and scrollable, non-editable text boxes displaying code!!! KEWLIEZ!

If you happen to understand my tutorial, I'd appreciate you dropping me a comment and letting me know. Thanks!

乾杯!
Cheers!
Posted by Cindy at 12:55 PM
Tags: , , ,

1 comments:

Daniel said...

*muah*

November 20, 2008 11:03 PM

Post a Comment

Subscribe to: Post Comments (Atom)