WordPress- how to implement Syntax Highlighting

syntaxhighlighter Some while ago, I started publishing code on this website. On that days I used the free WordPress webhosting. But I wasn’t content with the representation of it. After some time, I moved my site to a payed hosting, where I could implement any plugin that I liked.

Because I love sharing my knowledge and attaching the code to the article is the best way to explain, I searched for a plug-in that could do pretty coloring on my code. I tried some, like Syntax Highlighter Evolved, who worked for a while. But upon a mysterious update, it stopped doing its job. It refused to show any code highlighting on my first page, but he gladly showed it on the article page. After few weeks, it stopped completely.I don’t know why – I updated it, delete it from my website and installed it again – nothing helped.

The last resort was to search for something else. I tried a plug-in using Genshi, but neither it given the desired results. Also imagine that you have 30 articles with almost 100 pieces of code and you have to migrate from <pre class=”brush:something”> to [something]. Easy you might say, but I’m no typing monkey!

So I wanted to install the original highlighter, Alex Gorbatchev’s one, but its website is quite cryptic  when sharing installation information. Too bad, but that’s life. I will share this with you and I hope that you’ll have easier time to implement it than me.

First, you have to download the latest version. Unpack it and upload to your web server’s root the two folders, Scripts and Styles. Be very careful with the names, because some servers change the casing when uploading and Linux is case-sensitive. Alternatively, you might use a hosted version of the scripts, if you don’t have space or means to upload it – available here. More explanations on this kind of implementation you can find under Syntax Highlighter:Hosting.

Then, you have to insert the code in your page to make the scripts available. For this, you have to modify the header.php in your current theme( found usually in /public_html/wp-content/themes/[theme name]/). Add the following lines of code so that these will be the first script file starting from top:

<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js"></script>

<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js"></script>

<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js"></script>

<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js"></script>

<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js"></script>

<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" id="shTheme"/>

<script type="text/javascript">
	SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';

Of course, you have to replace the http://alexgorbatchev.com/pub/sh/current/ with your own path to the Scripts and Styles folders. And that’s it – save the header.php file and upload it back to your website. Add some code and test it, like this:

 * Checks a password and returns a value indicating whether the password is a "strong" 
 * password. The criteria for a strong password are:
  • Minimum 8 characters
  • Maxmium 32 characters
  • Contains at least one lowercase letter
  • Contains at least one uppercase letter
  • Contains at least one number or symbol character
* * @param password The password to check * * @return A value indicating whether the password is a strong password (true) * or not (false). */ public function validateStrongPassword(password:String):Boolean { if (password == null || password.length <= 0) { return false; } return STRONG_PASSWORD_PATTERN.test(password); }