CSS: Code Examples on a Web Page

Links to the scripts for the syntax highlighting feature on this site can be found on the Google Code page, "syntaxhighlighter." Personally, I like it but it's a bit heavy if you're looking for a simple solution.

If you're looking for a less invlolved implementation, you can simply add the following code to your stylesheet(s) or page(s) to make your <pre> or <code> tags look more styled. In this case however, you will need to convert the HTML entities into special characters before using in examples.

			pre,
			code {
			   display:block;
			   font: 1em 'Courier New', Courier, Fixed, monospace;
			   font-size : 100%;
			   color: #000;
			   background : #fff url(images/preback.jpg) no-repeat left top;
			   overflow : auto;
			   text-align:left;
			   border : 1px solid #99cc66; /*highlight color */
			   padding : 0px 20px 0 30px;
			   margin:1em 0 1em 0;
			   line-height:17px;
			}