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.

  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:

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

    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.