COLOURcode

Syntax Highlighting - two of the best code colouring tools available

Summary of features

COLOURcode integrates two popular syntax highlighters: highlight.js and Prism, both of which have their strengths. highlight.js has automatic language recognition and a great many themes, whereas Prism is used by CSS-Tricks, A List Apart, SitePoint and many more leading websites for developers.

At a glance

  • highlight.js supports 150 languages and has 71 styles.
  • Prism supports 111 languages (third-party styles available).
  • Prism is as light as a feather, blazing fast and very popular.

highlight.js (using tomorrow-night-bright stylesheet)

highlight.js has over 70 theme stylesheets available - the code below is shown in 'Tomorrow Night Bright'. Click here to see examples of other themes.

C++

#include <iostream>

int main(int argc, char *argv[]) {

    /* An annoying "Hello World" example */
    for (auto i = 0; i < 0xFFFF; i++)
        cout << "Hello, World!" << endl;
    
    char c = '\n';
    unordered_map <string, vector<string> > m;
    m["key"] = "\\\\"; // this is an error
    
    return -2e3 + 12l;
}

SQL

BEGIN;
CREATE TABLE "topic" (
    -- This is the greatest table of all time
    "id" serial NOT NULL PRIMARY KEY,
    "forum_id" integer NOT NULL,
    "subject" varchar(255) NOT NULL
);
ALTER TABLE "topic" ADD CONSTRAINT forum_id FOREIGN KEY ("forum_id") REFERENCES "forum" ("id");

-- Initials
insert into "topic" ("forum_id", "subject") values (2, 'D''artagnian');

select /* comment */ count(*) from cicero_forum;

-- this line lacks ; at the end to allow people to be sloppy
/*
but who cares?
*/
COMMIT

HTML

<?xml version="1.0"?>
<response value="ok" xml:lang="en">
    <text>Ok</text>
    <comment html_allowed="true"/>
    <ns1:description><![CDATA[
    CDATA is <not> magical.
    ]]></ns1:description>
    <a></a> <a/>
</response>


<!DOCTYPE html>
<title>Title</title>

<style>body {width: 500px;}</style>

<script type="application/javascript">
    function $init() {return true;}
</script>

<body>
    <p checked class="title" id='title'>Title</p>
    <!-- here goes the rest of the page -->
</body>

Javascript

import {x, y} as p from 'point';
const ANSWER = 42;

class Car extends Vehicle {
    constructor(speed, cost) {
        super(speed);
    
        var c = Symbol('cost');
        this[c] = cost;
    
        this.intro = `This is a car runs at
            ${speed}.`;
  }
}

for (let num of [1, 2, 3]) {
    console.log(num + 0b111110111);
}

function $initHighlight(block, flags) {
    try {
        if (block.className.search(/\bno\-highlight\b/) != -1)
            return processBlock(block.function, true, 0x0F) + ' class=""';
    } catch (e) {
        /* handle exception */
        var e4x =
            <div>Example
                <p>1234</p>
            </div>;
    }
    for (var i = 0 / 2; i < classes.length; i++) { // "0 / 2" should not be parsed as regexp
        if (checkCondition(classes[i]) === undefined)
            return /\d+[\s/]/g;
    }
    console.log(Array.every(classes, Boolean));
}

export  $initHighlight;

Prism (using default theme/stylesheet)

The Prism examples shown below use Prism's default theme/stylesheet. Click here to see examples of other Prism themes available via github.

C++

#include <iostream>

int main(int argc, char *argv[]) {

    /* An annoying "Hello World" example */
    for (auto i = 0; i < 0xFFFF; i++)
        cout << "Hello, World!" << endl;
    
    char c = '\n';
    unordered_map <string, vector<string> > m;
    m["key"] = "\\\\"; // this is an error
    
    return -2e3 + 12l;
}

SQL

BEGIN;
CREATE TABLE "topic" (
    -- This is the greatest table of all time
    "id" serial NOT NULL PRIMARY KEY,
    "forum_id" integer NOT NULL,
    "subject" varchar(255) NOT NULL
);
ALTER TABLE "topic" ADD CONSTRAINT forum_id FOREIGN KEY ("forum_id") REFERENCES "forum" ("id");

-- Initials
insert into "topic" ("forum_id", "subject") values (2, 'D''artagnian');

select /* comment */ count(*) from cicero_forum;

-- this line lacks ; at the end to allow people to be sloppy
/*
but who cares?
*/
COMMIT

HTML

<?xml version="1.0"?>
<response value="ok" xml:lang="en">
    <text>Ok</text>
    <comment html_allowed="true"/>
    <ns1:description><![CDATA[
    CDATA is <not> magical.
    ]]></ns1:description>
    <a></a> <a/>
</response>


<!DOCTYPE html>
<title>Title</title>

<style>body {width: 500px;}</style>

<script type="application/javascript">
    function $init() {return true;}
</script>

<body>
    <p checked class="title" id='title'>Title</p>
    <!-- here goes the rest of the page -->
</body>

Javascript

import {x, y} as p from 'point';
const ANSWER = 42;

class Car extends Vehicle {
    constructor(speed, cost) {
        super(speed);
    
        var c = Symbol('cost');
        this[c] = cost;
    
        this.intro = `This is a car runs at
            ${speed}.`;
  }
}

for (let num of [1, 2, 3]) {
    console.log(num + 0b111110111);
}

function $initHighlight(block, flags) {
    try {
        if (block.className.search(/\bno\-highlight\b/) != -1)
            return processBlock(block.function, true, 0x0F) + ' class=""';
    } catch (e) {
        /* handle exception */
        var e4x =
            <div>Example
                <p>1234</p>
            </div>;
    }
    for (var i = 0 / 2; i < classes.length; i++) { // "0 / 2" should not be parsed as regexp
        if (checkCondition(classes[i]) === undefined)
            return /\d+[\s/]/g;
    }
    console.log(Array.every(classes, Boolean));
}

export  $initHighlight;