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;

Java

Java Language Keywords


abstract continue for        new       switch
assert   default  goto       package   synchronized
boolean  do       if         private   this
break    double   implements protected throw
byte     else     import     public    throws
case     enum     instanceof return    transient
catch    extends  int        short     try
char     final    interface  static    void
class    finally  long       strictfp  volatile
const    float    native     super     while

	

Operators

// postfix
expr++ expr--
// unary
++expr --expr +expr -expr ~ !
// multiplicative
* / %
// additive
+ -
// shift
<< >> >>>
// relational
< > <= >= instanceof
// equality
== !=
// bitwise AND
&
// bitwise exclusive OR
^
// bitwise inclusive OR
|
// logical AND
&&
// logical OR
||
// ternary
? :
// assignment
= += -= *= /= %= &= ^= |= <<= >>= >>>=
	

Simple class example

package com.prismjs;

import java.io.*;

@SuppressWarnings("unchecked")
public class PrismJS {

	public static Integer test = 0;

	/**
	 * Javadoc style comment
	 *
	 * @param args
	 */
	public static void main(String[] args) {
		// Let's create some variables
		int numArgs = args.length;
		Integer a = 0x1;
		String test = "" + "Hello" + " \"World\"!";
		double dvalue = 1.23;
		int optest = 0;
		optest += 321 - 45 * 1247 / 425 % 123;

		/*
		 * Multiline comment
		 */
		for (int i = 0; i < numArgs; i++) {
			// Simple line comment
			System.out.println("Arg value= " + args[i]);
		}

		do {
			System.out.println("Do while ok!");
		} while (false);
	}
}

	

As you can notice String keyword is not highlighted because it's not a Java language keyword (cf. Java Language Keywords). The main reason is that String is not a primitive type such as int but a class type like Integer.

Coffeescript

Variable assignment

foo = "bar"

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;

Single line comments

# This is a comment

Link in comment

# http://lea.verou.me
###
Block Comment
### 

Nested strings

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

String inside comment

# "foo"

Strings with slashes

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

Two or more division operators on the same line

foo = 5 / 6 / 7;

A division operator on the same line as a regex

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

A function


_buttonClick: (a, b) ->
	@hide()
	

An Object


code = {
	css: "Cascading Style Sheets"
	cs: "CoffeeScript"
}
	

Class Definition


class CoffeeScript extends Prism.Javascript
	

HTTP

Request Examples

A simple HTTP GET request:

GET https://example.tld/v1/:serviceName/users.json?sort=:sortMethod HTTP/1.1

Here is an HTTP POST with a body:

POST https://example.tld/v1/:serviceName/users.json HTTP/1.1
Content-Type: application/json

{
	"names": ["test1", "test2"],
	"version": 1.0
}

Response Examples

JSON response body:

HTTP/1.1 200 OK
Content-Type: application/json
X-Response-Time: 6ms

{
	"users": [
		{
			"name": "John",
			"points": 24
		},
		{
			"name": "Lea",
			"points": 15
		}
	]
}

XML response body:

HTTP/1.1 200 OK
Content-Type: application/xml
X-Response-Time: 10ms

<root>
	<status code="0">
		Successful
	</status>
</root>

APL

Variable assignment

a←1 2 3

Literals

1e6 2j3 3.14 'a' 'abc' ⍬

Comments

#!/usr/bin/env runapl
a←1 2 3 ⍝ this is a comment

Primitive functions

a+b×c⍴⍳10

Operators

+/ f⍣2

Dfns

{0=⍴⍴⍺:'hello' ⋄ ∇¨⍵}

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"/;