Syntax Highlighting in WordPress

After some research, I decided to use the iG:Syntax Hiliter v3.5 plugin in my WordPress 2.0.5.

Installation and use are fairly easy. I only adjusted syntax_hilite_css.css which ships with the plugin to get an output compatible with my site’s style.

Here’s the CSS code and itself a demo of the plugin:

[css]

.syntax_hilite, li .syntax_hilite {
padding:3px 3px 10px 8px; border:1px solid #aaaaaa; background-color:#FEFEFE;
font-family:’Courier New’,Courier,monospace;
/* comment the line below to remove scrolling in code boxes */
overflow:auto; white-space:nowrap;
}

/* change this line to set the width of code box */
.syntax_hilite {
width:100%;
}

/* change this line to set the width of code box in a list */
li .syntax_hilite {
width:100%;
}

/* text bar above code box */
.igBar {
width: 100%;
text-align:right;
text-decoration:none;
font-size:10px;
padding-top:1px;
margin:0px;
}

.igBar a {
text-decoration:none;
text-transform: lowercase;
border-left: 1px solid #aaaaaa;
border-top: 1px solid #aaaaaa;
border-right: 1px solid #aaaaaa;
padding:2px;
}

.syntax_hilite .langName {
color:#000000;
font-weight:bold;
}

.syntax_hilite textarea {
margin:0px -5px -2px 0px;
border:none;
}

[/css]

Read here about which other useful WordPress plugins I use.

One thought on “Syntax Highlighting in WordPress

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s