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;
-
}
Read here about which other useful WordPress plugins I use.
June 9th, 2008 at 9:59 am
such a funny and useful tools, thanks for your introduction^^