What am I up to instead? During the day ECMWF keeps me very busy – I really love it. Besides that I’m still improving on the piano, devouring a book or two a week (not as fast as the to-read pile grows, mind you), and herding the Netdisco community and source code towards world domination. All good stuff.

For the time being, the best place to keep tabs on me is probably Twitter.

– olly.

Text in code blocks or preformatted (i.e. fixed width) came out huge on the iPhone and iPad making things look ridiculous. It seems the WordPress Twenty-Ten theme (or derivatives of it) explicitly super-size fixed width text on these platforms.

The fix is to edit style.css in whatever theme you’re using and comment out the styling as below:

/* =Mobile Safari ( iPad, iPhone and iPod Touch )
-------------------------------------------------------------- */
/*
pre {
    webkit-text-size-adjust: 140%;
}
code {
    webkit-text-size-adjust: 160%;
}
*/

I suspect there is good intention in the Twenty-Ten theme’s style, but as I also have the SyntaxHighlighter plugin installed, things conflict and go awry.

This solution was gratefully lifted from the WordPress Answers web site.

The trouble is, pre-formatted blocks (i.e. the <pre> tag) are botched when importing, mainly because I need to perpetrate a hack over on the origin site to get things rendering properly. What would be nice is to have those blocks rendered here using the SyntaxHighlighter WordPress Plugin that is installed.

It turns out writing a filter plugin for WordPress is not that hard. There is a system of hooks at which the plugin registers callback subroutines. The callback gets passed some content which it can filter, and return back. All I need to do is filter out the junky <pre> sections for ones which will render well under SyntaxHighlighter.

First the plugin header, which WordPress uses to add an entry to the plugins list, in the Plugins section of the site admin panel:

<?php
/*
Plugin Name: FeedWordpress-SyntaxHighlighter
Plugin URI: http://blog.gorwits.me.uk/
Description: Import preformatted text properly for SyntaxHighlighter
Version: 1.1
Author: Oliver Gorwits
Author URI: http://blog.gorwits.me.uk/
License: Artistic
*/

Next we register the callback subroutine against a hook which has been added by the FeedWordPress plugin:

add_filter(
    /*hook=*/ 'syndicated_item_content',
    /*function=*/ 'fwp_add_class_to_pre_in_content',
    /*order=*/ 10, 
    /*arguments=*/ 2
);

And finally the callback itself:

function fwp_add_class_to_pre_in_content ($content, $post) {
    // remove code segement used to format on the blogs.perl.org site
    // replaces *all* occurrences
    $content = str_replace(
        '<pre><code class="prettyprint">',
        '<pre>',
        $content
    );  
    $content = str_replace(
        '</code></pre>',
        '</pre>',
        $content
    );  

    // locate and extract the pre blocks
    preg_match_all('/<pre>(?:.(?!<\/pre>))+.<\/pre>(?:<\/p>)?/s',
        $content, $matches, PREG_OFFSET_CAPTURE);

    // work through list of <pre> blocks, rewriting them
    foreach (array_reverse($matches[0]) as $val) {
        $pre_block = $val[0];
        $offset    = $val[1];

        $new_pre = '<pre class="brush: plain; gutter: false; title: ;">' .
                        // remove the junk added by syndication
                        // ok, this breaks if pre contains legit HTML
                        strip_tags($pre_block) .
                   '</pre>';

        // reinsert the new pre block into the content
        // replacing the old one
        $content = substr($content, 0, $offset) .
                   str_replace($pre_block, $new_pre,
                               substr($content, $offset));
    }

    // Send it back
    return $content;
} /* fwp_add_class_to_pre_in_content() */

I’m not the best PHP programmer out there, but I cobbled this together and it seems to work

The final step is to drop this file into a subdirectory of .../wp-content/plugins/ on the server, and hey presto the plugin is available for activating. Next time the feed is syndicated, the content is passed through this code.

A simple fix (already posted to the bug report) is to edit .../styles/shCore.css and after the existing overflow entry on line 60, add:

overflow-y: hidden !important;

Simply create a preformatted paragraph and enter the text to be highlighted. Top and tail this with [brush] tags like so:

1

The value of the brush in the class is the SyntaxHighlighter Brush alias. This can be followed by various rendering options:

1

Below are the parameters you can pass and what they do. For the booleans (i.e. on/off), pass true/1 or false/0.

• lang or language — The language syntax to highlight with.
• autolinks — Toggle automatic URL linking.
• classname — Add an additional CSS class to the code box.
• collapse — Toggle collapsing the code box by default
• firstline — What number the first line should be.
• gutter — Toggle the left-side line numbering.
• highlight — Line numbers to highlight such as: 2,5-10,12
• htmlscript — Toggle highlighting any extra HTML/XML.
• light — Toggle light mode which disables the gutter and toolbar all at once.
• padlinenumbers — Controls line number padding (false, true, or an integer).
• title (v3 only) — Sets some text to show up before the code.
• toolbar — Toggle the toolbar (buttons in v2, the about question mark in v3)
• wraplines (v2 only) — Toggle line wrapping.

To display [tags] as I have done above without having them interpreted by the plugin, make use of the fact that you can use both the [brush][/brush] form (as above) and a more verbose alternative:

1