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

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.

LanguageClass
HTMLlanguage-markup
CSSlanguage-css
JavaScriptlanguage-javascript
CoffeeScriptlanguage-coffeescript
PHPlanguage-php
Rubylanguage-ruby
Golanguage-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');color:#F0F0F0!important;width:100%}

LESS

@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,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){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;
add