Syntax Highlighting in WordPress

Posted on by — 1 Comment ↓

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:

PLAIN TEXT
CSS:
  1. .syntax_hilite, li .syntax_hilite {
  2. padding:3px 3px 10px 8px; border:1px solid #aaaaaa; background-color:#FEFEFE;
  3. font-family:'Courier New',Courier,monospace;
  4. /* comment the line below to remove scrolling in code boxes */
  5. overflow:auto; white-space:nowrap;
  6. }
  7.  
  8. /* change this line to set the width of code box */
  9. .syntax_hilite {
  10. width:100%;
  11. }
  12.  
  13. /* change this line to set the width of code box in a list */
  14. li .syntax_hilite {
  15. width:100%;
  16. }
  17.  
  18. /* text bar above code box */
  19. .igBar {
  20. width: 100%;
  21. text-align:right;
  22. text-decoration:none;
  23. font-size:10px;
  24. padding-top:1px;
  25. margin:0px;
  26. }
  27.  
  28. .igBar a {
  29. text-decoration:none;
  30. text-transform: lowercase;
  31. border-left: 1px solid #aaaaaa;
  32. border-top: 1px solid #aaaaaa;
  33. border-right: 1px solid #aaaaaa;
  34. padding:2px;
  35. }
  36.  
  37. .syntax_hilite .langName {
  38. color:#000000;
  39. font-weight:bold;
  40. }
  41.  
  42. .syntax_hilite textarea {
  43. margin:0px -5px -2px 0px;
  44. border:none;
  45. }

Read here about which other useful WordPress plugins I use.

About ordnas

Sandro Groganz is the Head of Marketing at Magnolia, creator of the open web content management system Magnolia CMS. He is an expert in the field of marketing open source products. He co-founded Age of Peers, a global communications agency for organizations in Open Source. He served as Vice President of Marketing at Mindquarry, an open source startup financed by Hasso Plattner Ventures, and Vice President of Communication at eZ Systems, the creator of the open source content management system eZ Publish.

Facebook Comments