InvoiceBerry Blog

Our thoughts & tips on small businesses, freelancers and sole traders

How to hightlight code, php, html, javascript, css in WordPress

Written by on March 22, 2011

We just started to blog about technical things for web developers and our first blog post in this category seemed to us take ages to write.

The problem? We never posted any code (PHP, HTML, CSS, Javascript, etc.) in WordPress before.

Our solution? After some searching on Google and WordPress we found a useful plugin called SyntaxHighlighter Plus. Their developer website apparently is offline, but the plugin is dead simple and more info can be found on the WordPress website (http://wordpress.org/extend/plugins/syntaxhighlighter-plus/).

But apparently there is either a bug in WordPress or the plugin (or both), as the WordPress editor always shows our code wrong after we update a blog post. Meaning that everything is fine after the creation of a new blog post, but if you need to update it, it all goes funny.

But by using the HTML editor instead of the Visual editor in your WordPress admin interface and by changing the following code we fixed our problem:

  • open the file “syntaxhighlighter.php” which is in the directory “/wp-content/plugins/syntaxhighlighter-plus/”
  • search for the function “TinyMCEEncode” (in our case it was in line 322-340)
  • change it to the following:

[sourcecode language=”php”]
function TinyMCEEncode( $content ) {
if ( !user_can_richedit() || !$this->CheckForBBCode( $content ) ) return $content;

$matches = $this->GetBBCode( $content );

if ( empty($matches) ) return $content; // No BBCode found, we can stop here

// Loop through each match and encode the code
foreach ( (array) $matches as $match ) {
$code = $match[5] ;
//$code = htmlspecialchars( $match[5] );
//$code = str_replace( ‘&’, ‘&’, $code );
//$code = str_replace( ‘<', '<', $code ); //$code = str_replace( '>‘, ‘>’, $code );

$content = str_replace( $match[5], $code, $content );
}

return $content;
}
[/sourcecode]
We commented out the “htmlspecialchars” function as well as all the “str_replace” functions. This prevents the script from changing your HTML code in the HTML editor.

Please let us know if you have any problems with the plugin or any code changes we suggest.

Subscribe now

Get our weekly digest into your inbox!

Sign up to our weekly newsletter to receive the best freelancing and small business articles on InvoiceBerry.




Ready to start invoicing your clients with InvoiceBerry?

Sign up to our Forever Free account. Yes, it's really free.

Don't leave us yet!

Subscribe to our weekly digest!

Sign up to our newsletter to receive our weekly email digest every Friday morning and read about the best freelancing and small business articles on InvoiceBerry.

Read previous post:
Dynamically change the height of a textarea based on the text (Javascript)

As mentioned in this post, we will publish some solutions and code snippets of problems we've encountered and solved. The...

Close