Code Higlighting Using AWSome Prism.js

When you need a code highlighter JS library, Prism.js comes to rescue. Not only like full-markdown processor with in-built code-highlighting like Pygments or Rouge in Jekyll. Prism.js is purely for code highlighting. This is a very powerful library which allows: skinning, multi-language, line numbers, line highlight, go to line, copy button, execute code button, preview colors / transitions / commands in code, dos specific highlighting. It’s cool - and needs only a JS file plus pre HTML tag only.

Why Prim.JS ?

Prism.js is a wonderful code highlighter with following features:

Dead simple: Include prism.css and prism.js, use proper HTML5 code tags (code.language-xxxx), done!
Intuitive: Language classes are inherited so you can only define the language once for multiple code snippets.
Light as a feather: The core is 2KB minified & gzipped. Languages add 0.3-0.5KB each, themes are around 1KB.
Blazing fast: Supports parallelism with Web Workers, if available.
Extensible: Define new languages or extend existing ones. Add new features thanks to Prism’s plugin architecture.
Easy styling: All styling is done through CSS, with sensible class names like .comment, .string, .property etc

Any Live Output ?

Following code block is fetched by prism from this web-site only as file and rendered beautifully:

Examples

This sites’s testprism.css file is pulled in real-time from server and highlighted with Prism:

** Note that prism only requires pre tag around code and nothing else **

What prism has done for you ?

You can click on any word in code and prism will take you to it’s language reference.
Just data-line="2-4,9-16" attribute in pre tag of html code lets you higlight lines.
You can jump to code lines 9-16 by clicking here by using href=#idCode.9-16.
You can do line numbering (even from negative numbers) by just using data-start="-5" as shown.
URL in code like www.google.com are automatically linked by prism, click yourself to see.
Following code when inserted will allow color preview (just take mouse over some color in code).


    Prism.languages.insertBefore('css', 'important', {
        'color': /\B#(?:[0-9a-f]{3}){1,2}\b/i
    });
    new Prism.plugins.Previewer('color', function(value) {
        // Reset the background color
        this.style.backgroundColor = '';
        // Set the background color to the value of the current hovered token
        this.style.backgroundColor = value;
        // Returns true if the color is valid, false otherwise
        return !!this.style.backgroundColor;
    }, 'css');

Prism can highlight colors, transitions and mode. In below code hover your mouse over all color, gradients, time etc. (* unfortunately this does not works if we load a file using prism *)


    /* PreViewer Portion */
    div {
        color: rgba(255, 0, 0, 0.2);
        background: purple;
        border: 1px solid hsl(100,70%,40%);
        background: -moz-linear-gradient(left,  #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* FF3.6+ */
        background: -webkit-linear-gradient(left,  #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left,  #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(left,  #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); /* IE10+ */
        background: linear-gradient(to right,  #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); /* W3C */
        transition: color 0.3s linear;
        transition: all linear 3s;
        transform: rotate(10deg);    
    }

Prism can beautifully shown command line output from bash, powershell. Examples root user - no output, non-root user with output, and windows powershell
Following snippet can pre-process your code and clean it like tabs, indentation, spaces etc. in prism


Prism.plugins.NormalizeWhitespace.setDefaults({
    'remove-trailing': true,
    'remove-indent': true,
    'left-trim': true,
    'right-trim': true,
    'break-lines': 80,
    'indent': 2,
    'remove-initial-line-feed': false,
    'tabs-to-spaces': 4,
    'spaces-to-tabs': 4
});

Official Usage

Following are links on how to use prism.js in your application:

More Examples

CSS

div {
    color: rgba(255, 0, 0, 0.2);
    background: purple;
    border: 1px solid hsl(100,70%,40%);
}

Markup attributes

<table bgcolor="#6E5494">
<tr style="background: lightblue;">

Less

@nice-blue: #5B83AD;
#header a {
    color: hsla(102, 53%, 42%, 0.4);
}

Sass

$color: blue
@mixin foobar
    color: rgba(147, 32, 34, 0.8)
.foo
    color: pink

Scss

$color: blue;
$attr: background;
.foo {
    #{$attr}-color: rgba(255,255,0,0.75);
}

Stylus

color = olive
.foo
    color: #000

Root User Without Output

cd /usr/local/etc
cp php.ini php.ini.bak
vi php.ini

Non-Root User With Output

pwd
/usr/home/chris/bin
ls -la
total 2
drwxr-xr-x   2 chris  chris     11 Jan 10 16:48 .
drwxr--r-x  45 chris  chris     92 Feb 14 11:10 ..
-rwxr-xr-x   1 chris  chris    444 Aug 25  2013 backup
-rwxr-xr-x   1 chris  chris    642 Jan 17 14:42 deploy

Windows PowerShell With Output

dir


    Directory: C:\Users\Chris


Mode                LastWriteTime     Length Name
----                -------------     ------ ----
d-r--        10/14/2015   5:06 PM            Contacts
d-r--        12/12/2015   1:47 PM            Desktop
d-r--         11/4/2015   7:59 PM            Documents
d-r--        10/14/2015   5:06 PM            Downloads
d-r--        10/14/2015   5:06 PM            Favorites
d-r--        10/14/2015   5:06 PM            Links
d-r--        10/14/2015   5:06 PM            Music
d-r--        10/14/2015   5:06 PM            Pictures
d-r--        10/14/2015   5:06 PM            Saved Games
d-r--        10/14/2015   5:06 PM            Searches
d-r--        10/14/2015   5:06 PM            Videos