Full list of features

Only 2KB minified & gzipped (core). Each language definition adds roughly 300-500 bytes.
Encourages good author practices. Other highlighters encourage or even force you to use elements that are semantically wrong, like <pre> (on its own) or <script>. Prism forces you to use the correct element for marking up code: <code>. On its own for inline code, or inside a <pre> for blocks of code. In addition, the language is defined through the way recommended in the HTML5 draft: through a language-xxxx class.
The language definition is inherited. This means that if multiple code snippets have the same language, you can just define it once, in one of their common ancestors.
Supports parallelism with Web Workers, if available. Disabled by default (why?).
Very easy to extend without modifying the code, due to Prism’s plugin architecture. Multiple hooks are scattered throughout the source.
Very easy to define new languages. Only thing you need is a good understanding of regular expressions
All styling is done through CSS, with sensible class names rather than ugly namespaced abbreviated nonsense.
Wide browser support: Edge, IE11, Firefox, Chrome, Safari, Opera, most Mobile browsers
Highlights embedded languages (e.g. CSS inside HTML, JavaScript inside HTML)
Highlights inline code as well, not just code blocks
Highlights nested languages (CSS in HTML, JavaScript in HTML)
It doesn’t force you to use any Prism-specific markup, not even a Prism-specific class name, only standard markup you should be using anyway. So, you can just try it for a while, remove it if you don’t like it and leave no traces behind.
Highlight specific lines and/or line ranges (requires plugin)
Show invisible characters like tabs, line breaks etc (requires plugin)
Autolink URLs and emails, use Markdown links in comments (requires plugin)

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. Alternatively, Prism also supports a shorter version: lang-xxxx.

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 and instead use the API, you can set Prism.manual to true before the DOMContentLoaded event is fired. By setting the data-manual attribute on the <script> element containing Prism core, this will be done automatically. Example:

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

<script>
window.Prism = window.Prism || {};
window.Prism.manual = true;
</script>
<script src="prism.js"></script>

Usage with CDNs

In combination with CDNs, we recommend using the Autoloader plugin which automatically loads languages when necessary.

The setup of the Autoloader, will look like the following. You can also your own themes of course.

<!DOCTYPE html>
<html>
<head>
	...
	<link href="https://myCDN.com/prism@v1.x/themes/prism.css" rel="stylesheet" />
</head>
<body>
	...
	<script src="https://myCDN.com/prism@v1.x/components/prism-core.min.js"></script>
	<script src="https://myCDN.com/prism@v1.x/plugins/autoloader/prism-autoloader.min.js"></script>
</body>
</html>

CDNs which provide PrismJS are e.g. cdnjs, jsDelivr, and UNPKG.

Usage with Webpack, Browserify, & Other Bundlers

If you want to use Prism with a bundler, install Prism with npm:

$ npm install prismjs

You can then import into your bundle:

import Prism from 'prismjs';

To make it easy to configure your Prism instance with only the languages and plugins you need, use the babel plugin, babel-plugin-prismjs. This will allow you to load the minimum number of languages and plugins to satisfy your needs. See that plugin's documentation for configuration details.

Usage with Node

If you want to use Prism on the server or through the command line, Prism can be used with Node.js as well. This might be useful if you're trying to generate static HTML pages with highlighted code for environments that don't support browser-side JS, like AMP pages.

Example:

const Prism = require('prismjs');

// The code snippet you want to highlight, as a string
const code = `var data = 1;`;

// Returns a highlighted HTML string
const html = Prism.highlight(code, Prism.languages.javascript, 'javascript');

Requiring prismjs will load the default languages: markup, css, clike and javascript. You can load more languages with the loadLanguages() utility, which will automatically handle any required dependencies.

Example:

const Prism = require('prismjs');
const loadLanguages = require('prismjs/components/');
loadLanguages(['haml']);

// The code snippet you want to highlight, as a string
const code = `= ['hi', 'there', 'reader!'].join " "`;

// Returns a highlighted HTML string
const html = Prism.highlight(code, Prism.languages.haml, 'haml');

Note: Do not use loadLanguages() with Webpack or another bundler, as this will cause Webpack to include all languages and plugins. Use the babel plugin described above.

Note: loadLanguages() will ignore unknown languages and log warning messages to the console. You can prevent the warnings by setting loadLanguages.silent = true.

Used By

Examples

Full list of features

Limitations

Basic usage

Usage with CDNs

Usage with Webpack, Browserify, & Other Bundlers

Usage with Node

Supported languages

Plugins

Third-party language definitions

Third-party tutorials

Credits