Highlight syntax on your post

Posted on Oct 22, 2008 in JavaScript, WordPress | 1 comment

I’ve been looking for a plugin for that fit’s what I need for this website. I couldn’t find one that works and displays right for Wordpress. So I turned to a little javascript and lucky to find Syntaxhighlighter by Alex Gorbatchev wich kind of fits what I just need like a glove. I figured making a post for it so everyone using Wordpress can have their codes highlighted too. So here goes…

1. Download the script first: Grab it Here
2. Upload Script and Styles Folder to your current theme directory, e.g. /wp-content/themes/glossyblue-1-4/ (Take note these are compressed files).
3. To well organize my directories I renamed my folders:
   /javascript/ (former Scripts)
   /css/ (former Styles)
   /flash/ (I moved the clipboard.swf from Scripts to this folder)
4. There’s one little problem that I encountered upon using this script, since it will parse using the <pre name=”code” class=”html”>…code here…</pre> tag. Somehow Worpress removes the name parameter automatically. So I opted in forcing the script to use the id parameter instead. Open the shCode.js hit cltr+f on your keyboard and find this code
   if(tags[i].getAttribute(‘name’) == name) and change it to if(tags[i].getAttribute(‘id’) == name) and save it.
5. Login to your Website and Edit the footer.php Design->Theme Editor just before the </body> tag copy paste the code below, provided you did step 3 and followed the naming scheme.

   <link type="text/css" rel="stylesheet" href="<?php bloginfo('template_directory');?>/css/SyntaxHighlighter.css"></link>
   <script language="javascript" src="<?php bloginfo('template_directory'); ?>/javascript/shCore.js"></script>
   <script language="javascript" src="<?php bloginfo('template_directory'); ?>/javascript/shBrushPhp.js"></script>
   <script language="javascript" src="<?php bloginfo('template_directory'); ?>/javascript/shBrushJScript.js"></script>
   <script language="javascript" src="<?php bloginfo('template_directory'); ?>/javascript/shBrushXml.js"></script>
   <script language="javascript" src="<?php bloginfo('template_directory'); ?>/javascript/shBrushCss.js"></script>
   <script language="javascript">
   dp.SyntaxHighlighter.ClipboardSwf = '<?php bloginfo('template_directory'); ?>/flash/clipboard.swf';
   dp.SyntaxHighlighter.HighlightAll('code');
   </script>

   shBrushPhp.js (PHP), shBrushXml.js (XML/HTML) and shBrushCss.js (CSS) for more language support see author’s site. http://code.google.com/p/syntaxhighlighter/

6. Congratulations!!! You’re golden.
7. To make the script highlight your code is a bit tricky, you are going switch between Visual mode and Html mode. Type this code on Html mode <pre id=”code” class=”html”>…code here…</pre> then you’ll need to switch back to Visual mode from there you’ll start typing your code or copy and paste it.