Posts Tagged “source”

Wednesday, June 13, 2007
  Posting Source Code in WordPress, Take 2

In my searching, I have found another WordPress source code plugin, called wp-syntax. This one uses GeSHi, the Generic Syntax Highlighter. It features many languages, and is extensible to even more. (If I ever post a COBOL snippet, I'll probably add COBOL support to it, and contribute it to the codebase.)

To use it, you simply put a pre tag, followed by lang=[language]. It will also do line numbering. Of course, with a single “language” parameter, the embedded language will not be highlighted as well. In this case, the previous plug-in works better; although the syntax highlighting has to be done manually, it can handle multiple languages.

(NOTE: The samples have been removed, as this blog is not running under WordPress. However, since the source code from another post was moved here, it is presented below using myWebLog's code highlighting.)

<?php
/**
 * This creates a list of category links that can be used with a category dropdown
 */
$aCategories = get_all_category_ids();
$iMaxCat = 0;
foreach($aCategories as $iThisCat) {
    if ($iMaxCat < $iThisCat) {
        $iMaxCat = $iThisCat;
    }
}
$iMaxCat++;
?>
<div style="text-align:center;">
<form name="categoryform" action="" style="text-align:center;">
    <script type="text/javascript">
        var aLink = new Array(<?php echo($iMaxCat); ?>);
<?php
foreach($aCategories as $iThisCat) {
    echo("aLink[$iThisCat] = \"" . get_category_link($iThisCat) . "\";\n");
} ?>
        function goCat() {
            window.location =
                aLink[document.getElementById('cat')[document.getElementById('cat').selectedIndex].text;
        }
    </script>
    <?php wp_dropdown_categories('class=sidebardropdown&orderby=name&show_count=1&hierarchical=1'); ?>
    <br /><br />
    <button class="sidebarbutton" type="button" style="margin-top:5px;" onclick="goCat();">View Category</button>
    </form>
</div>

This is another option, and is probably what I'll use for single-language posts, or posts where the embedded language may not be crucial.

Categorized under
Tagged , , , ,

Wednesday, May 30, 2007
  Posting Source Code in WordPress

Traditionally, posting source code in a WordPress blog, especially if it were HTML or PHP, was problematic. There are a few reasons for this…

  • WordPress is very good about ensuring that it outputs valid XHTML, so it strips mis-matched and invalid tags. This is usually desirable, but it wreaks havoc with HTML and XML code posts.
  • Since WordPress is coded in PHP, blocks of PHP will attempt to execute.
  • White space is collapsed, which can kill any readability that the user has set out; the “visual editor” (TinyMCE) does its best to create efficient HTML. This can actually break spacing-oriented languages such as Python.

So how do you do it? It's actually pretty easy, using the Code Markup WordPress plugin. You can download the plugin from that link, and upload it to ./wp-content/plugins. The instructions on the website are critical - the “visual” editor will not allow the code to come through unscathed. However, the visual editor only corrupts the code if you actually save it; what I have done is write the post using the visual editor, then disable it and put the code in. It's the best of both worlds! (Make sure that, once you have the code in, you don't edit the post using the visual editor - unless you have a good backup…)

The post below this one (about category lists in WordPress) was done using this plugin. (This isn't running in WordPress any more.) In addition, you can use the span tag to do the color-coding. I created a few CSS classes (“key” for keywords, “func” for functions, “attr” for attributes, “embed” for embedded language), and used them to accomplish the color coding. It seems that it would be pretty easy to write another plugin that used a list of keywords to do this syntax highlighting; maybe that's a challenge for another day.

A big “atta boy” to Bennet McElwee for a fantastic plugin!

Categorized under
Tagged , , ,