Coda theme for SyntaxHighlighter

15 August 2009

It's no secret – I love Coda! It's a pleasure to use. It looks so damn good. When I started using SyntaxHighlighter I set out to create a Coda theme. Thankfully, the good folks at Panic had done the ground work for me. All I had to do was create a style sheet that would make my code snippets look as sexy online as they do in my text editor.

Or so I thought.

As I delved deeper, it became apparent that realising my goal would require plenty of effort. In order for SyntaxHighlighter to work its magic it requires at least one brush and at least one theme. A brush is a JavaScript file that contains regular expressions to match the syntactical features of a particular language. A theme, as you might expect, is a CSS file which controls the way SyntaxHighlighter's output is displayed. At first glance, brushes and themes appear to be loosely coupled, allowing programmers to create language-specific brushes, and designers to create themes that can work with any number of brushes.

It soon became apparent that brushes and themes are not so loosely coupled after all. For example, the bundled HTML brush does not include the angled brackets when highlighting a tag. Coda does. So, the theme itself is accompanied by a number of customized brushes.

Supported languages

The theme currently supports a handful of languages: CSS, HTML/XML, JavaScript, PHP, and Python. These are the languages with which I'm familiar. If you'd like to see another language supported, please let me know.

CSS

p.error.message   { border: 1px solid #c00; background-color: #fcc; }
p.info.message    { border: 1px solid #fc3; background-color: #ffc; }
p.success.message { border: 1px solid #0b0; background-color: #cfc; }

HTML

<form id="searchform" action="http://davidchambersdesign.com/" method="get">
    <div>
        <label for="s" class="structural">search davidchambersdesign.com</label>
        <input type="text" id="s" name="s" value="" class="text" />
        <input type="submit" id="searchsubmit" value="Search" />
    </div>
</form><!--/searchform-->

JavaScript

// simulate textarea:focus
document.observe('dom:loaded', function () {
    $$('textarea').each(function (e) {
        Event.observe(e, 'focus', function (event) {
            $(e.parentNode).addClassName('focus')
        });
        Event.observe(e, 'blur', function (event) {
            $(e.parentNode).removeClassName('focus')
        });
    });
});

PHP

/**
 * echoes nicely formatted filesize
 * @param string $filename
 * @param string $before
 * @param string $after
 */
function print_filesize($filename, $before = ' <span class="filesize">(', $after = ')</span>')
{
    if (file_exists($filename))
    {
        $size = filesize($filename);
        $unit = 'B';

        if (intval($size/(1024*1024*1024)))
        {
            $size = number_format(($size/(1024*1024*1024)), 1);
            $unit = 'GB';
        }
        elseif (intval($size/(1024*1024)))
        {
            $size = number_format(($size/(1024*1024)), 1);
            $unit = 'MB';
        }
        elseif (intval($size/1024))
        {
            $size = number_format(($size/1024), 1);
            $unit = 'KB';
        }

        $approx = $unit == 'B' ? '' : '≈' ;

        echo "{$before}{$approx}{$size} {$unit}{$after}";
    }
}

Note that the variable names in the double-quoted string above are a different colour from the rest of the string. Nice!

Python

# function accepts any number of arguments since *all_sales is a tuple
def daily_sales_total(*all_sales):
    total = 0.0
    for each_sale in all_sales:
        total += float(each_sale)
    return total

Including non-HTML code in HTML snippets

The Coda theme, like Coda itself, can handle non-HTML code inside HTML snippets.

CSS inside HTML

For HTML snippets that contain some CSS, use <pre class="brush: css; html-script: true;"></pre>.

<head>
    <title>Coda theme for SyntaxHighlighter</title>
    <style type="text/css">
        p {
            margin: 0.75em 0;
            font: 1.0em/1.5em "Lucida Grande", Helvetica, Arial, sans-serif;
            padding: 0.75em;
        }
        p.js-off {
            border: 1px solid #c00; /* red */
            background-color: #fcc;
        }
        p.js-on {
            border: 1px solid #0b0; /* green */
            background-color: #cfc;
        }
    </style>
</head>

JavaScript inside HTML

For HTML snippets that contain some JavaScript, use <pre class="brush: javascript; html-script: true;"></pre>.

<body>
    <p class="js-off">
        JavaScript is currently <strong>disabled</strong>.
    </p>
    <p class="js-on" style="display:none">
        JavaScript is currently <strong>enabled</strong>.
    </p>
    <script type="text/javascript">
        google.load('prototype', '1.6');
    </script>
    <script type="text/javascript">
        document.observe('dom:loaded', function () {
            $$('.js-off').invoke('hide');
            $$('.js-on').invoke('show');
        });
    </script>
</body>

PHP inside HTML

For HTML snippets that contain some PHP, use <pre class="brush: php; html-script: true;"></pre>.

<ul>
<?php foreach ($names as $name): ?>
    <li><?php echo $name; ?></li>
<?php endforeach; ?>
</ul>

Limitations and known issues

Unfortunately, the Coda brush does not perform quite as well as the text editor from which it gets its name. The failings are as follows:

It is not possible to mix more than one additional language with HTML. While it is possible to mix CSS with HTML, or JavaScript with HTML, it is not possible to mix both CSS and JavaScript with HTML. This is a limitation of SyntaxHighlighter itself.
When mixing CSS or JavaScript with HTML, the style/script opening tags are given the class 'script' rather than being processed in the same manner as the rest of the HTML code. As a result these tags appear in red, the colour used for PHP tags. (If no workaround exists I'm going to suggest that Alex make the necessary changes to ensure that style/script opening tags are treated normally.)
In order to correctly colour all HTML tags, each < that is not part of a string is considered to be part of a tag. This causes incorrect highlighting, as can be seen in this example:
```
<script type="text/javascript">
    function isLarger(x, y) {
        return (x > y);
    }
</script>
```

Setup

Download and unzip coda-theme-for-syntaxhighlighter.zip.
Open example.html to confirm that everything is working correctly.
Upload styles/shThemeCoda.css to your SyntaxHighlighter styles directory.
Upload styles/bg.png to your SyntaxHighlighter styles directory.
Upload the brushes in scripts/ to your SyntaxHighlighter scripts directory, replacing the existing CSS, JavaScript, PHP, Python, and XML brushes. Three versions of each brush are included: .js, .min.js (minified), and .min.js.gz (minified and gzipped). Use whichever version suits you best.
Add a link to the Coda theme wherever you link to shCore.css. If you're using the standard setup, this will be in the head section of the document.

Update — 24 August 2009

Coda theme has been updated so that comments are now italicized (as they are in Coda). XML brush for Coda theme now applies the correct class name ("xml-comment") to HTML comments.

Comments

Awesome theme! I would love to see Java added to the library.

Keep up the awesome work!

I hadn't touched Java because I don't know the language well. I've discovered, though, that it's possible to access the source: Coda's syntax bundles. I've created a Java brush, but don't have time right now to update this post (I'll do so later today).

Compare the Coda-style Java highlighting to SyntaxHighlighter's default Java highlighting. There's quite a difference!

Feel free to grab the Java brush and the updated Coda theme right away. I'll update the Coda theme bundle when I get a chance.

David, stellar job! The only other theme I could use is plain text, for everything that doesn't fall into the categories above.

Thanks again - absolutely loving this theme!

I'm in the process of creating brushes for all the languages supported by Coda. I've found the regular expressions used in Coda's modes to be more sophisticated — and thus, more accurate — than those used in SyntaxHighlighter's brushes. Once I've finished I'll zip them up and make the whole bundle available for download.

Your job is great!! I love Coda-style, too. I really wanna use it coda theme for syntaxhighlighter. But that link can not download. David, would you help me?

I've fixed the download link. Enjoy the theme. :)

Oh~!! Quick reply thanks. I'll use it ~ ☺

Man, I've been trying to get that style in coda for so long. Can you export your PHP-HTML one for me to make my coding that much more enjoyable? Email is in comment! Thanks

This site has not used SyntaxHighlighter since I switched from WordPress to Mango several months ago. This page is extremely misleading as a result. I plan to rectify this at some stage.

For those that are curious, I'm currently using google-code-prettify for syntax highlighting on this site, with Coda-like custom CSS which you're welcome to use.

hah! This is great. Good work. I plan to install this. :)