Tutti Frutti: A Vibrant Pygments Theme

 — 8 Min Read

Pygments is a syntax highlighting engine, written in Python, that works by outputting a processed version of almost any source code, ready to be highlighted with a stylesheet.

This site is powered by Jekyll and one of the great features of Jekyll is that Pygments is baked right in. I wasn't satisfied with any of the available themes for Pygments, so I wrote my own. Tutti Frutti uses only colour to highlight syntax rather than bolding or italicising text—this means it makes no assumptions about which fonts, weights or styles are available in your project.

I've released this in a very prototypal state that meets my own needs but has not been widely tested. Over time, I'll continue to refine it. Feel free to offer feedback.

HTML Demo

<body>
    <p class="class" hidden>Text</p>
    <!-- comment -->
    <img src="image.png">
</body>

CSS Demo

body, html {
    font: 'Helvetica', Arial, sans-serif;
}
.content, #sidebar {
    background: rgba(255,0,0,.1); /* comment */
    width: 50%;
    float: left;
}
input[type="text"], a:hover {
    color: #000;
    opacity: 0.9;
}
h1::after {
    content: '';
}

JavaScript Demo

function functionName(e) {
    var name = 10 * 2;
    if (e.className.search(/\bno\-class\b/) != -1)
        return false;
    if (e == 'sample')
        alert('Hello World');
    // comment
}

Python Demo

def init_route_map(self, routes):
parsed_handler_map = []
handler_name = None
for regexp, handler in routes:
try:
    handler_name = handler.__name__
except AttributeError:
    pass
if not regexp.startswith('^'):
    regexp = '^' + regexp
if not regexp.endswith('$'):
    regexp += '$'
compiled_regex = re.compile(regexp)
parsed_handler_map.append((compiled_regex, handler))
return parsed_handler_map

Ruby Demo

module Module::Helper
    def build_scope(name, options = {})
        options = options.merge(constraints)
        Module::Factory.build(name, current, options)
    end
end