Rainbow

// Your code is beautiful — show it off

Fork me on GitHub
×

Download

Select what languages you want to include to build a custom package.

Languages select all

CSS themes are available on GitHub.

  1. Download

    What is this?

    Rainbow is a code syntax highlighting library written in Javascript.

    It was designed to be lightweight (2.5kb), easy to use, and extendable.

    It is completely themable via CSS.

    Please consider donating to help support development.

  2. What does it look like?

    /*
 * This is some sample code to illustrate how things look!
 */
import Musician from './liverpool';

class Paul extends Musician {
    constructor(bass) {
        super(bass);
    }

    get fullName() {
        return 'Paul McCartney';
    }

    perform() {
        this.play(this.instrument);
        this.sing();
    }
}

export default Paul;

  3. How do I use it?

    1. First include some markup for code you want to be highlighted.

    Rainbow will pick up the language based on the data-language attribute. This example shows you how to display python code.

    <pre><code data-language="python">def openFile(path):
    file = open(path, "r")
    content = file.read()
    file.close()
    return content</code></pre>

    If you want to highlight HTML you should change data-language="python" to data-language="html".

    You can see the list of supported languages here.

    2. Then include a css theme file in the <head> of your page

    <link href="/assets/css/theme.css" rel="stylesheet" type="text/css">

    3. Finally include rainbow js and whatever language(s) you want before the closing </body> tag.

    <script src="/assets/js/rainbow.js"></script>
<script src="/assets/js/language/generic.js"></script>
<script src="/assets/js/language/python.js"></script>

    Node.js

    If you are using node.js you can install rainbow from NPM.

    npm install rainbow-code

    Then use it

    var rainbow = require('rainbow-code');
var highlighted = rainbow.colorSync('var foo = true;', 'javascript');

  4. How does it work?

    Rainbow on its own is very simple. It goes through blocks of code (or text), processes regular expression (regex) patterns, and wraps matching patterns in <span> tags. All the theming is left up to CSS.

    A simple set of language patterns looks like this:

    Rainbow.extend('css', [
    {
        name: 'comment',
        pattern: /\/\*[\s\S]*?\*\//gm
    },
    {
        name: 'constant.hex-color',
        pattern: /#([a-f0-9]{3}|[a-f0-9]{6})(?=;|\s)/gi
    },
    {
        matches: {
            1: 'constant.numeric',
            2: 'keyword.unit'
        },
        pattern: /(\d+)(px|cm|s|%)?/g
    }
]);

  5. Documentation

    Full documentation is available on GitHub.

  6. How can I contribute?

    If you would like to contribute or submit a bug check out the project on GitHub.