Tutti Frutti: a vibrant pygments theme

#css #shipped #web

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.


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

CSS Demo

html, body {
    font: 'Helvetica', Arial, sans-serif;
.content, #sidebar {
    background: rgba(255, 0, 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

Ruby Demo

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