Examples

The examples in this page serve a dual purpose: They act as unit tests, making it easy to spot bugs, and at the same time demonstrate what Prism can do, on simple and on edge cases.

Different markup

code.language-css

p { color: red; }

pre.language-css > code

p { color: red; }

pre > code.language-css

p { color: red; }

pre.language-css > code.language-*

p { color: red; }

code.lang-css

p { color: red; }

pre.lang-css > code

p { color: red; }

pre > code

No language, should inherit .language-markup

<p>hi!</p>

code.language-*

No language, should inherit .language-markup

<p>hi!</p>

code.language-none

Should not be highlighted.

<p>hi!</p>

Markup

Empty tag

<p></p>

Tag that spans multiple lines

<p
>hello!
</p>

Name-attribute pair

<p></p>

Name-attribute pair without quotes

<p class=prism></p>

Attribute without value

<p data-foo></p>
<p data-foo ></p>

Namespaces

<html:p foo:bar="baz" foo:weee></html:p>

XML prolog

<?xml version="1.0" encoding="utf-8"?>
<svg></svg>

DOCTYPE

<!DOCTYPE html>
<html></html>

CDATA section

<ns1:description><![CDATA[
  CDATA is <not> magical.
]]></ns1:description>

Comment

<!-- I'm a comment -->
And i'm not

Entities

&amp; &#x2665; &#160; &#x152;

Embedded JS and CSS

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>I can haz embedded CSS and JS</title>
	<style>
		@media print {
			p { color: red !important; }
		}
	</style>
</head>
<body>
	<h1>I can haz embedded CSS and JS</h1>
	<script>
	if (true) {
		console.log('foo');
	}
	</script>
	
</body>
</html>

CSS

Empty rule

*{} * {} p {}
ul,
ol {}

Simple rule

p { color: red; }

Important rule

p { color: red !important; }

@ rule

@media screen and (min-width: 100px) {}

Comment

/* Simple comment here */

String

content: 'foo';

URL

content: url(foo.png);

JavaScript

Variable assignment

var foo = "bar", baz = 5;

Operators

(1 + 2 * 3)/4 >= 3 && 4 < 5 || 6 > 7

Indented code

if (true) {
	while (true) {
		doSomething();
	}
}

Regex with slashes

var foo = /([^/])\/(\\?.|\[.+?])+?\/[gim]{0,3}/g;

Regex that ends with double slash

var bar = /\/\*[\w\W]*?\*\//g;

Single line comments & regexes

// http://lea.verou.me
var comment = /\/\*[\w\W]*?\*\//g;

Link in comment

// http://lea.verou.me
/* http://lea.verou.me */

Nested strings

var foo = "foo", bar = "He \"said\" 'hi'!"

Strings inside comments

// "foo"
/* "foo" */

Strings with slashes

env.content + '</' + env.tag + '>'
var foo = "/" + "/";

Regex inside single line comment

// hey, /this doesn’t fail!/ :D

Two or more division operators on the same line

var foo = 5 / 6 / 7;

A division operator on the same line as a regex

var foo = 1/2, bar = /a/g;
var foo = /a/, bar = 3/4;

Known failures (JavaScript)

There are certain edge cases where Prism will fail. There are always such cases in every regex-based syntax highlighter. However, Prism dares to be open and honest about them. If a failure is listed here, it doesn’t mean it will never be fixed. This is more of a “known bugs” list, just with a certain type of bug.

Comment-like substrings

"foo /* bar */ baz"; "foo // bar";

Two quotes of the same type (i.e. both single or both double) inside a regex

var foo = /"foo"/;