Used By

Prism is used on several websites, small and large. Some of them are:

Smashing Magazine WebPlatform.org A List Apart Mozilla Developer Network (MDN) CSS-Tricks Typeplate

It’s also used on the personal blog of Brendan Eich, creator of JavaScript itself!

Examples

The Prism source, highlighted with Prism (don’t you just love how meta this is?):



	

This page’s CSS code, highlighted with Prism:



	

This page’s HTML, highlighted with Prism:



	

This page’s logo (SVG), highlighted with Prism:



	

If you’re still not sold, you can view more examples or try it out for yourself.

Full list of features

Limitations

Basic usage

You will need to include the prism.css and prism.js files you downloaded in your page. Example:

<!DOCTYPE html>
<html>
<head>
	...
	<link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
	...
	<script src="prism.js"></script>
</body>
</html>

Prism does its best to encourage good authoring practices. Therefore, it only works with <code> elements, since marking up code without a <code> element is semantically invalid. According to the HTML5 spec, the recommended way to define a code language is a language-xxxx class, which is what Prism uses. To make things easier however, Prism assumes that this language definition is inherited. Therefore, if multiple <code> elements have the same language, you can add the language-xxxx class on one of their common ancestors. This way, you can also define a document-wide default language, by adding a language-xxxx class on the <body> or <html> element.

If you want to opt-out of highlighting for a <code> element that is a descendant of an element with a declared code language, you can add the class language-none to it (or any non-existing language, really).

The recommended way to mark up a code block (both for semantics and for Prism) is a <pre> element with a <code> element inside, like so:

<pre><code class="language-css">p { color: red }</code></pre>

If you use that pattern, the <pre> will automatically get the language-xxxx class (if it doesn’t already have it) and will be styled as a code block.

If you want to prevent any elements from being automatically highlighted, you can use the attribute data-manual on the <script> element you used for prism and use the API. Example:

<script src="prism.js" data-manual></script>

Plugins

Plugins are additional scripts (and CSS code) that extend Prism’s functionality. Many of the following plugins are official, but are released as plugins to keep the Prism Core small for those who don’t need the extra functionality.

No assembly required to use them. Just select them in the download page.

It’s very easy to write your own Prism plugins. Did you write a plugin for Prism that you want added to this list? Send a pull request!

Third-party language definitions

Third-party tutorials

Several tutorials have been written by members of the community to help you integrate Prism into multiple different website types and configurations:

Please note that the tutorials listed here are not verified to contain correct information. Read at your risk and always check the official documentation here if something doesn’t work :)

Have you written a tutorial about Prism that’s not already included here? Send a pull request!

Credits