Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s a spin-off from Dabblet and is tested there daily by thousands.

Prism

Prism is a simple, lightweight, and easy to use syntax highlighter. It is easily customizable and has support for some plugins to extend its functionality.

Language Class
HTML language-markup
CSS language-css
JavaScript language-javascript
CoffeeScript language-coffeescript
PHP language-php
Ruby language-ruby
Go language-go

Here’s a quick example:

HTML, XML


                <?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>
                

CSS


                @media screen and (-webkit-min-device-pixel-ratio: 0) {
                  body:first-of-type pre::after {
                    content: 'highlight: ' attr(class);
                  }
                  body {
                    background: linear-gradient(45deg, blue, red);
                  }
                }
                @import url('print.css');
                @page:right {
                 margin: 1cm 2cm 1.3cm 4cm;
                }
                @font-face {
                  font-family: Chunkfive; src: url('Chunkfive.otf');
                }
                div.text,
                #content,
                li[lang=ru] {
                  font: Tahoma, Chunkfive, sans-serif;
                  background: url('hatch.png') /* wtf? */;  color: #F0F0F0 !important;
                  width: 100%;
                }
                

LESS


                /*
                Using the most minimal language subset to ensure we
                have enough relevance hints for proper Less detection
                */
                @import "fruits";
                @rhythm: 1.5em;
                @media screen and (min-resolution: 2dppx) {
                    body {font-size: 125%}
                }
                section > .foo + #bar:hover [href*="less"] {
                    margin:     @rhythm 0 0 @rhythm;
                    padding:    calc(5% + 20px);
                    background: #f00ba7 url(http://placehold.alpha-centauri/42.png) no-repeat;
                    background-image: linear-gradient(-135deg, wheat, fuchsia) !important ;
                    background-blend-mode: multiply;
                }
                @font-face {
                    font-family: /* ? */ 'Omega';
                    src: url('../fonts/omega-webfont.woff?v=2.0.2');
                }
                .icon-baz::before {
                    display:     inline-block;
                    font-family: "Omega", Alpha, sans-serif;
                    content:     "\f085";
                    color:       rgba(98, 76 /* or 54 */, 231, .75);
                }
                

SCSS


                    @import "compass/reset";
                // variables
                $colorGreen: #008000;
                $colorGreenDark: darken($colorGreen, 10);
                @mixin container {
                    max-width: 980px;
                }
                // mixins with parameters
                @mixin button($color:green) {
                    @if ($color == green) {
                        background-color: #008000;
                    }
                    @else if ($color == red) {
                        background-color: #B22222;
                    }
                }
                button {
                    @include button(red);
                }
                // nested definitions
                ul {
                    width: 100%;
                    padding: {
                        left: 5px; right: 5px;
                    }
                  li {
                      float: left; margin-right: 10px;
                      .home {
                          background: url('http://placehold.it/20') scroll no-repeat 0 0;
                    }
                  }
                }
                .banner {
                    @extend .container;
                }
                a {
                  color: $colorGreen;
                  &:hover { color: $colorGreenDark; }
                  &:visited { color: #c458cb; }
                }
                @for $i from 1 through 5 {
                    .span#{$i} {
                        width: 20px*$i;
                    }
                }
                @mixin mobile {
                  @media screen and (max-width : 600px) {
                    @content;
                  }
                }
                

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]) {
                }
                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 =
                        
Example

1234

; } 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; } } export $initHighlight;