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