Cypris’ lookout

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 <textarea> 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 <textarea> 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 <textarea> 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#

1 2 3 4 5 6 7 8 9 string path = ""; string safeReferrer = null; FileInfo fileInfo = new FileInfo(string.Format("{0}/{1}", path, image)); int index = 0;

// single line comments // second single line override protected void OnLoad(EventArgs e) { if(Attributes["class"] != null) { //_year.CssClass = _month.CssClass = _day.CssClass = Attributes["class"]; } // base.OnLoad(e); } /*********************************** ** Multiline block comments **********************************/ /// <summary> /// Gets or sets currently selected date of birth or <see cref="DateTime.MinValue"/> if selection is incomplete or invalid. /// </summary> public DateTime Date { String stringWithUrl = "http://blog.dreamprojections.com"; 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

/*********************************** ** Multiline block comments **********************************/ 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

<?xml version="1.0" encoding="utf-8" ?> <!-- comments --> <rootNode> <childNodes> <childNode attribute = "value" attribute='value' attribute=/> <childNode /> <childNode /> <childNode /> <childNode attribute="value"></childNode> <childNode> <![CDATA[ this is some CDATA content <!-- comments inside cdata --> <b alert='false'>tags inside cdata</b> ]]> </childNode> </childNodes> </rootNode> <!-- -- Multiline comments <b>tag</b> -->

PHP

/*********************************** ** Multiline block comments **********************************/ $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

SELECT TOP 10 FirstName, LastName, Email, --SUBSTRING(Phone, 2, 3) AS CityCode, SUBSTRING(Phone, 7, 8) AS PhoneNumber, upper(LanguagePref) AS Language, Address1, UpdatedOn AS CreatedOn FROM profiles WHERE -- Exclude all test emails Email NOT LIKE '%test%' AND Email NOT LIKE '%asdf%' ORDER BY UpdatedOn DESC

Entry Filed under  :  Web Design