Highlight

Prismis 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 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 wehave 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 definitionsul {    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 =        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;  }  console.log(Array.every(classes, Boolean));}export  $initHighlight;