Title: How to make code boxes
Last modified: August 18, 2016

---

# How to make code boxes

 *  [james2k1](https://wordpress.org/support/users/james2k1/)
 * (@james2k1)
 * [20 years, 7 months ago](https://wordpress.org/support/topic/how-to-make-code-boxes/)
 * I was wondering how to make a code box. so if I want to post a long java script
   it puts it into a scroll box on the page so it doesnt make the entry so long.
   any help is apreciated thx

Viewing 11 replies - 1 through 11 (of 11 total)

 *  [Kafkaesqui](https://wordpress.org/support/users/kafkaesqui/)
 * (@kafkaesqui)
 * [20 years, 7 months ago](https://wordpress.org/support/topic/how-to-make-code-boxes/#post-256624)
 * First, define a css class in your theme’s style.css. Something like the following:
 * `.code {
    width: 600px; height: 300px; overflow: auto; border: 1px solid #000;}
 * It’s the overflow property that displays the scroll bars (if needed). You can
   also set overflow to `scroll` if you want them displayed at all times. Then in
   your posts, add code like so:
 * `<pre class="code">
    function HeyAlert() { alert('Hey, don't click there!'); }
   </pre>
 *  Thread Starter [james2k1](https://wordpress.org/support/users/james2k1/)
 * (@james2k1)
 * [20 years, 7 months ago](https://wordpress.org/support/topic/how-to-make-code-boxes/#post-256642)
 * Thx for the code now I am having the problem. The code I put between The
    <pre
   class=”code”> </pre> Tags doesnt show on the page at all It makes the box with
   the scroll bars but thats it the box is blank any ideas what I’m doing wrong?
 *  Thread Starter [james2k1](https://wordpress.org/support/users/james2k1/)
 * (@james2k1)
 * [20 years, 7 months ago](https://wordpress.org/support/topic/how-to-make-code-boxes/#post-256650)
 * Here is the code im traying to get into the box
    i added it between the tags 
   you sujested <pre class=”code”>
 * <script LANGUAGE=”JAVASCRIPT”>
    <!– hide this script tag’s contents from old 
   browsers function lifetimer(){
 *  today = new Date()
 *  BirthDay = new Date(document.live.age.value)
 *  timeold = (today.getTime() – BirthDay.getTime());
 *  sectimeold = timeold / 1000;
 *  secondsold = Math.floor(sectimeold);
 *  msPerDay = 24 * 60 * 60 * 1000 ;
 *  timeold = (today.getTime() – BirthDay.getTime());
 *  e_daysold = timeold / msPerDay;
 *  daysold = Math.floor(e_daysold);
 *  e_hrsold = (e_daysold – daysold)*24;
 *  hrsold = Math.floor(e_hrsold);
 *  minsold = Math.floor((e_hrsold – hrsold)*60);
 *  document.live.time1.value = daysold
 *  document.live.time2.value = hrsold
 *  document.live.time3.value = minsold
 *  window.status = “Well at the moment you are ” + secondsold + “………… seconds old.”;
 *  timerID = setTimeout(“lifetimer()”,1000)
 * }
    // — done hiding from old browsers –>
 * </script>
 * </pre>
 *  [Kafkaesqui](https://wordpress.org/support/users/kafkaesqui/)
 * (@kafkaesqui)
 * [20 years, 7 months ago](https://wordpress.org/support/topic/how-to-make-code-boxes/#post-256659)
 * It’s reading the tags as *actual* tags. Edit your code so < is written as &lt;
   and > as &gt;
 *  Thread Starter [james2k1](https://wordpress.org/support/users/james2k1/)
 * (@james2k1)
 * [20 years, 7 months ago](https://wordpress.org/support/topic/how-to-make-code-boxes/#post-256704)
 * Thx so much for the help now is there a way in the style sheet to make it where
   only the side scroll bar shows up?
 *  Thread Starter [james2k1](https://wordpress.org/support/users/james2k1/)
 * (@james2k1)
 * [20 years, 7 months ago](https://wordpress.org/support/topic/how-to-make-code-boxes/#post-256717)
 * ok almost got everything right but now when I add the code it is putting “\” 
   in weird places that they dont belong any ides why here is a link to the page.
 * [http://www.grahamfamilytx.net/blog/?page_id=77](http://www.grahamfamilytx.net/blog/?page_id=77)
 *  [Kafkaesqui](https://wordpress.org/support/users/kafkaesqui/)
 * (@kafkaesqui)
 * [20 years, 7 months ago](https://wordpress.org/support/topic/how-to-make-code-boxes/#post-256878)
 * Ah, the annoying slash bug for `<pre>` tag content. I had forgotten about that
   one. And I thought they had whacked it with 1.5.2, but nope, it’s still there.
 * Fix information is here:
    [http://wordpress.org/support/topic/25326](http://wordpress.org/support/topic/25326)
 * Change occurs to functions-formatting.php in wp-includes/.
 *  [Amit Gupta](https://wordpress.org/support/users/amit/)
 * (@amit)
 * [20 years, 7 months ago](https://wordpress.org/support/topic/how-to-make-code-boxes/#post-257092)
 * If you want, you can use the [iG:Syntax Hiliter](http://blog.igeek.info/wp-plugins/igsyntax-hiliter/)
   plugin that colourise your code & allows you to post in a box. Along with Javascript,
   it supports many other languages.
 *  [morphinetearscut](https://wordpress.org/support/users/morphinetearscut/)
 * (@morphinetearscut)
 * [19 years, 10 months ago](https://wordpress.org/support/topic/how-to-make-code-boxes/#post-257338)
 * Anyway to do this with HTML?
    Thanks!
 *  [Mark (podz)](https://wordpress.org/support/users/podz/)
 * (@podz)
 * [19 years, 10 months ago](https://wordpress.org/support/topic/how-to-make-code-boxes/#post-257339)
 * MTC – where is your wp blog?
 *  [amandadroste](https://wordpress.org/support/users/amandadroste/)
 * (@amandadroste)
 * [19 years, 8 months ago](https://wordpress.org/support/topic/how-to-make-code-boxes/#post-257345)
 * Arrgh. I’ve tried all these things and I still can’t get my banner to show up
   on myspace as JUST CODE. I want people to be able to cut and paste it for themselves
   so i’m trying to get it to appear as THE CODE and not as the banner and i just
   can’t seem to figure it out. does anyone know how the heck to do that? Please
   help. if you want to see the site its [http://www.myspace.com/amandadroste](http://www.myspace.com/amandadroste)

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘How to make code boxes’ is closed to new replies.

 * In: [Installing WordPress](https://wordpress.org/support/forum/installation/)
 * 11 replies
 * 6 participants
 * Last reply from: [amandadroste](https://wordpress.org/support/users/amandadroste/)
 * Last activity: [19 years, 8 months ago](https://wordpress.org/support/topic/how-to-make-code-boxes/#post-257345)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics