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:


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);    

    '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


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;">


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


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


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


color = olive
    color: #000

Root User Without Output

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

Non-Root User With Output

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


    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