WebTechKitchen; Your Web Technology Kitchen, contact us to create, or maintain your websites and other digital properties.

code filter module for displaying code in a drupal post

Submitted by barnettech on Thu, 12/10/2009 - 15:32

This site uses code filter module to diplay code correctly in posts.

use <pre> and <code> tags to wrap your code.


this is a p tag

this is an h1 tag

I also put this in my style.css file in this drupal installation:

pre {
	overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */ /*
	width: 99%; */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
}

To not use the code filter module just put this into your style.css

pre, code, samp, kbd {
        font-family: "Courier New", Courier, monospace, sans-serif;
        text-align: left;
        background-color: #C0C0C0;
        }
pre code {
        line-height: 1.6em;
        font-size: 11px;
        }
pre {
        padding: 0.1em 0.5em 0.3em 0.7em;
        margin: 1.7em 0 1.7em 0.3em;
        overflow: auto;
        width: 93%;
        }
/* target IE7 and IE6 */
*:first-child+html pre {
        padding-bottom: 2em;
        overflow-y: hidden;
        overflow: visible;
        overflow-x: auto;
        }
* html pre {
        padding-bottom: 2em;
        overflow: visible;
        overflow-x: auto;
        }