I wanted to post some codes to several posts and set out to find ways to include longer code snippets on WordPress posts. Here are the steps I took to enable scrolling area for code snippets:
1. Go to your WordPress theme editor and either enable external style.css if not already enabled. I use tiga theme and had to enable the external style sheet.
2. Go to wp-content/themes/your-theme. Add the following code snippet to the style.css of your current theme
div.scroll {
height: 200px;
width: 300px;
overflow: auto;
border: 1px solid #666;
background-color: #ccc;
padding: 8px;
}
3. Then create a new post and paste the following in HTML mode
<div>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>
<span style="color: red;">This is red color</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>This is a normal paragraph.
<span style="font-weight: bold; font-size: 22px;">This is big bold text</span>
</p>
<p>This scrolling are can contain normal html like <a href="index.php">link</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
</div>
Reference:
http://www.domedia.org/oveklykken/css-div-scroll.php