Rainbow

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.

Demo

You can see rainbow in action at http://rainbowco.de.

You can also build/download custom packages from there.

Quick Start

Quick Start

Browser

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>

Include a CSS theme file in the <head>:

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

Include rainbow.js and whatever languages you want before the closing </body>:

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

By default dist/rainbow.min.js comes with some popular languages bundled together with it.

Node.js

Rainbow 2.0 introduced support for node.js. All of the existing API methods should work, but there is also a new Rainbow.colorSync method for synchronous highlighting.

Install rainbow

npm install --save rainbow-code

Highlight some code

var rainbow = require('rainbow-code');
var highlighted = rainbow.colorSync('// So meta\nrainbow.colorSync(\'var helloWorld = true;\');', 'javascript');
console.log(highlighted);

Supported Browsers

Rainbow 2.0 should work in the following browsers:

| Chrome | Firefox | IE | Safari | | ------ | ------- | --- | ------ | | 20+ | 13+ | 10+ | 6+ |

For older browsers you can download the legacy 1.2.0 release.

Supported Languages

Currently supported languages are:

C
C#
Coffeescript
CSS
D
Go
Haskell
HTML
Java
JavaScript
JSON
Lua
PHP
Python
R
Ruby
Scheme
Shell
Smalltalk

Specifying a language

In your markup the data-language attribute is used to specify what language to use for highlighting. For example:

<pre><code data-language="javascript">var testing = true;</code></pre>

Rainbow also supports the HTML5 style for specifying languages:

<pre><code class="language-javascript">var testing = true;</code></pre>

And the Google prettify style:

<pre class="lang-javascript"><code>var testing = true;</code></pre>

Themes

Themes are located in the themes/sass directory. They are written using sass so that common logic can be shared among all themes without having to duplicate it in each theme file. You should not edit the css files directly.

_base.sass includes some default styles shared by almost every theme. _init.sass contains mixins and initialization logic that is shared by every theme.

Rendering code blocks

As of version 2.0 the themes use a clever trick to display the highlighted code. All code blocks default to opacity: 0, but an animation is triggered on page load to happen after a 2 second delay.

This means for users who do not have JavaScript enabled the code will fade in after 2 seconds. If JavaScript is enabled, the animation is stopped on load and the delay is reset to 0s. That ensures that as soon as the code is done being highlighted it will be able to show up instantly. This is used to prevent a flash of unstyled text on page load and ensure that the code blocks only show up after they have been highlighted.

There is also a preload animation that will show up for any code block that takes longer than 300ms to load.

Adding custom rules for specific languages

A SASS mixin was added to simplify defining styles that should only apply for a specific language. Using it looks like this:

@include language("html")
    .support.operator
        color: #fff

@include language(("javascript", "js"))
    .variable.super
        color: #66D9EF

You can pass a single language or a list of languages.

JavaScript API Documentation

Rainbow has four public methods:

Rainbow.color
Rainbow.extend
Rainbow.addAlias
Rainbow.onHighlight
Rainbow.remove

Rainbow.color

Rainbow.color is used to highlight blocks of code.

For convenience, this method is called automatically to highlight all code blocks on the page when DOMContentLoaded fires. If you would like to highlight stuff that is not in the DOM you can use it on its own. There are three ways to use it.

The first option is calling the color method on its own:
```
Rainbow.color();
```
Each time this is called, Rainbow will look for matching pre blocks on the page that have not yet been highlighted and highlight them.

You can optionally pass a callback function that will fire when all the blocks have been highlighted.
```
Rainbow.color(function() {
    console.log('The new blocks are now highlighted!');
});
```

The second option is passing a specific element to the color method.

In this example we are creating a code block, highlighting it, then inserting it into the DOM:

var div = document.createElement('div');
div.innerHTML = '<pre><code data-language="javascript">var foo = true;</code></pre>';
Rainbow.color(div, function() {
    document.getElementById('something-else').appendChild(div;)
});

The final option is passing in your code as a string to Rainbow.color.

Rainbow.color('var foo = true;', 'javascript', function(highlightedCode) {
    console.log(highlightedCode);
});

Preventing automatic highlighting on page load

If you want to prevent code on the page from being highlighted when the page loads you can set the defer property to true.

Rainbow.defer = true;

Note that you have to set this before DOMContentLoaded fires or else it will not do anything.

Extra options for color

As of right now there is one extra option for color.

globalClass

This option allows you to have an extra class added to every span that Rainbow renders. This can be useful if you want to remove the classes in order to trigger a special effect of some sort.

To apply a global class you can add it in your markup:

<pre><code data-language="javascript" data-global-class="animate">var hello = true;</code></pre>

Or you can pass it into a Rainbow.color call like this:

Rainbow.color('var hello = true;', {
    language: 'javascript',
    globalClass: 'animate'
});

Rainbow.extend

Rainbow.extend is used to define language grammars which are used to highlight the code you pass in. It can be used to define new languages or to extend existing languages.

A very simple language grammer looks something like this:

Rainbow.extend('example', [
    {
        name: 'keyword',
        pattern: /function|return|continue|break/g
    }
]);

Any pattern used with extend will take precedence over an existing pattern that matches the same block. It will also take precedence over any pattern that is included as part of the generic patterns.

For example if you were to call

Rainbow.extend('example', [
    {
        name: 'keyword.magic',
        pattern: /function/g
    }
]);

This would mean that function will be highlighted as <span class="keyword magic">function</span>, but return, continue, and break will still be highlighted as just <span class="keyword">return</span>, etc.

Extending existing languages

By default languages are considered to be standalone, but if you spe

Rainbow

Install / Use

README

Rainbow

Demo

Contents

Quick Start

Browser

Node.js

Install rainbow

Highlight some code

Supported Browsers

Supported Languages

Specifying a language

Themes

Rendering code blocks

Adding custom rules for specific languages

JavaScript API Documentation

Rainbow.color

Preventing automatic highlighting on page load

Extra options for color

globalClass

Rainbow.extend

Extending existing languages