WordPress: Formating and colouring Code
Sunday, June 11, 2006
WordPress is pretty good, but it comes with no code formatting tool, yet colouring facilities.
I like the simplicity of dp.SyntaxHighlighter for displaying source code in web pages: it works with major browsers and degrades fairly well.
Its particularity is that is does its painting magic on the client side. This can be a drawback in some instances, where the client browser has JavaScript disabled for instance, but since the code to paint is located within tags, it will still display no matter what.
Configuring _dp.SyntaxHighlighter_to work in WordPress is pretty easy: just add the relevant code in your WordPress templates for header and footer according to the instructions found on the website and you’re done.
The issue though is making it possible to insert code when writing a post.
First of all, I doubt that there is any elegant way to make one of the rich HTML editors work well, so you’ll have to go back to basics and edit in HTML (WordPress at least hides the <br>
and <p>
tags so its’ not too bad).
Then there is the issue of WP adding the <br>
and <p>
to replace linefeeds, and this is where it becomes annoying: if you insert tags, everything in it will have the extraneous formatting code that will display verbatim on screen, sprinkling your nice source code with ugly html tags.
The solution I found was to use a small WordPress plug-in called codeautoescape
and available from:
http://priyadi.net/archives/2005/09/27/wordpress-plugin-code-autoescape/
I then modified it a bit to take care of the tag and the fact that we needed to take the attributes of the tag into account (dp.SyntaxHighlighter uses the class attribute to configure options for how to display the block of code).
You can download the modified version of the script: codeautoescape
To install it, just right-click and download from the link, rename it to codeautoescapte.php
then install it in your /wp-content/plugins
folder and activate it within the Plugins menu of WordPress.
Some examples of dp.SyntaxHighlighter in action:
C#
/*********************************** ** Multiline block comments **********************************/
///
get { #region Hello world try { /* DateTime result = new DateTime( int.Parse(_year.SelectedItem.Value), int.Parse(_month.SelectedItem.Value), int.Parse(_day.SelectedItem.Value) ); i *= 2; */ return result; } catch { /* return _minDate; */ } #endregion } set { Day = value.Day; Month = value.Month; Year = value.Year; }
}
JavaScript
var stringWithUrl1 = “http://blog.dreamprojections.com”; var stringWithUrl2 = ‘http://www.dreamprojections.com’;
// callback for the match sorting dpSyntaxHighlighter.prototype.SortCallback = function(m1, m2) { // sort matches by index first if(m1.index < m2.index) return -1; else if(m1.index > m2.index) return 1; else { /* // if index is the same, sort by length if(m1.length < m2.length) return -1; else if(m1.length > m2.length) return 1; */ }
alert('hello // world'); return 0;
}
XML / HTML
PHP
$stringWithUrl = “http://blog.dreamprojections.com”; $stringWithUrl = ‘http://www.dreamprojections.com’;
ob_start(“parseOutputBuffer”); // Start Code Buffering session_start();
function parseOutputBuffer($buf) { global $portal_small_code, $portal_gzcompress; global $PHP_SELF, $HTTP_ACCEPT_ENCODING;
// cleaning out the code. if($portal_small_code && !$portal_gzcompress) { $buf = str_replace(" ", "", $buf); $buf = str_replace("\n", "", $buf); $buf = str_replace(chr(13), "", $buf); }
}
SQL
Entry Filed under : Web Design
7 Comments Add your own
1. Nik | July 11th, 2006 at 00:15
Hi there…
Thank you for your efforts 🙂 I tried using your modified plugin but still get ‘spaghetti’ code (everything in one line.) Is there a tag (like code or pre) I need to nest the textarea in (in the HTML view)? I tried everything with no luck…
Thanks for the good work! 🙂
2. Renaud | July 11th, 2006 at 13:38
Hi Nik, there is no
pre
orcode
tag needed, onlytextarea
. The modified version of the autoescape script I provide takes every occurence of thetextarea
tags and everything in=between and encodes it before WordPress has a chance to mess it up, then it decodes it before outputing it in the final page verbatim.My suggestions are: – make sure that you only use the default, non-rich-DHTML editor when writing posts in WordPress. – make sure you include the dp.SyntaxHighlighter script references in the right location in the header and footer of your wordpress theme templates (have a look at the source of this page to see where I put mine). – Make sure you install and activate in WordPress plugins my modified autoescape script. – Check that, in your posts stored in the MySQL database, any occurence of the
textarea
is actually encoded (should be long sequences of characters).If that still doesn’t work, it could be that your theme’s CSS messes up style for the
textarea
tag. If that’s the case, try to comment out any occurence of it in your CSS just to see if it has any effect. You could also try to make sure that the SyntaxHighlighter’s scripts are loaded after the definition for the theme’s CSS.Good luck!
3. Nik | July 12th, 2006 at 22:07
I just realized that there were two places I could change or uncheck the “visual rich editor” option. One’s in the options tab (which is a global setting) and the other’s on the “My Account” page. I disabled the check box at the very bottom and voila! It works 🙂
Thanks a lot for your time 🙂 I’ve been switching my blog from MovableType to WordPress and am very (very) happy with the latter’s features and speed.
Thanks again!
4. Rumi | July 20th, 2006 at 13:17
Thank you for this post, it helped me alot while trying to get code posting going on my blog.
5. Thomas | August 4th, 2006 at 22:01
Thanks a lot, this was just the solution I needed!
6. epiphantastic » Blo&hellip | August 4th, 2006 at 22:24
[…] A fellow blogger has just posted a link to a great library for syntax highlighting. Having just posted a long tutorial with many bits of code, I found it to be a pain, so this will be a welcome addition to my toolkit. However, I ran into a few problems implementing it because WordPress inserts a bunch of <br /> tags whenever there are line breaks. Fortunately, Renaud Bompuis has provided us with a solution in the form of a WordPress plugin. After installing it, everything worked perfectly! […]
7. Snyke | August 4th, 2006 at 23:30
Nice work dude, I’m planning to add the syntaxhighlighter too, so I can finally stop worrying about my code 😛
Leave a Comment
Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
Trackback this post | Subscribe to the comments via RSS Feed