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>

Invalid HTML

<l </ul>

Multi-line attribute values

<p title="foo
	bar
	baz">

CSS

Empty rule

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

Simple rule

p { color: red; }

Important rule

p { color: red !important; }

@ rule

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

LESS variable

@main-color: red;
	.foo {
	  background: @main-color;
	}

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 = "/" + "/";
var foo = "http://prismjs.com"; // Strings are strings and comments are comments ;)

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

foo = /"foo"/;

Tests (JavaScript)

Ce paragraphe est là pour servir de test.

Test 1


/**
 * A short automatic script for Google Analytics audience service
 * by Lilian Besson, (C), 2014
 **/
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  /* Here are set the default values for these variables,
   * corresponding to the default domain. */
  var my_id = 'UA-38514290-15',    my_domain = 'ga-beacon.appspot.com';
  /* Here a case-by-case analysis is done to change this variable
   * when the page is located on another web server. */
  switch(window.location.host) {
    case 'www.dptinfo.ens-cachan.fr':
        my_id = 'UA-38514290-2';  my_domain = 'dptinfo.ens-cachan.fr';
        break;
    case 'lbesson.bitbucket.io':
        my_id = 'UA-38514290-14'; my_domain = 'bitbucket.org';
        break;
    case 'perso.crans.org':
        my_id = 'UA-38514290-1'; my_domain = 'crans.org';
        break;
    default:
        break; };
  /* New method. */
  ga('create', my_id, my_domain); ga('send', 'pageview');
  /* Old method. */
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', my_id]);
  // _gaq.push(['_setDomainName', my_domain]);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    console.log("[INFO] Sending info to Google Analytics: id=" + my_id + ", domain=" + my_domain);
  })();
		

Test 2 : conway.js



		

Test 3 : jarvis.html