syntax highlighter, built with modern web standards in
mind.
It’s used in
thousands of websites, including some of those you visit daily. <div class="container">
<div class="row">
<div class="col-md-6 order-md-1 text-center text-md-left pr-md-5">
<h1 class="mb-3 bd-text-purple-bright">Bootstrap</h1>
<p class="lead">
Build responsive, mobile-first projects on the web with the world’s most popular front-end component
library.
</p>
<p class="lead mb-4">
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas
or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt
components, and powerful plugins built on jQuery.
</p>
<div class="row mx-n2">
<div class="col-md px-2">
<a href="/docs/4.4/getting-started/introduction/" class="btn btn-lg btn-bd-primary w-100 mb-3"
onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">Get
started</a>
</div>
<div class="col-md px-2">
<a href="/docs/4.4/getting-started/download/" class="btn btn-lg btn-outline-secondary w-100 mb-3"
onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download 4.4.1');">Download</a>
</div>
</div>
<p class="text-muted mb-0">
Currently v4.4.1
</p>
</div>
</div>
</div>
#languages {
column-count: 4;
}
#languages > h1 {
margin-top: 0;
column-span: all;
}
#languages label {
display: block;
padding: .2em;
}
#languages label[data-id="javascript"] {
border-bottom: 1px solid #aaa;
padding-bottom: 1em;
margin-bottom: 1em;
}
#languages .unavailable {
color: #aaa;
}
#languages input {
margin-right: .7em;
}
#examples > section {
display: block;
margin: auto;
max-width: 900px;
}
#examples h3 {
margin: 1em 0 0.3em;
}
ul {
padding-left: 40px;
}var each = _.each = _.forEach = function (obj, iterator, context) {
if (obj == null) return;
if (nativeForEach && obj.forEach === nativeForEach) {
obj.forEach(iterator, context);
} else if (obj.length === +obj.length) {
for (var i = 0, l = obj.length; i < l; i++) {
if (i in obj && iterator.call(context, obj[i], i, obj) === breaker) return;
}
} else {
for (var key in obj) {
if (_.has(obj, key)) {
if (iterator.call(context, obj[key], key, obj) === breaker) return;
}
}
}
};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>or
<script>
window.Prism = window.Prism || {};
window.Prism.manual = true;
</script>
<script src="prism.js"></script>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 and jsDelivr.
If you want to use Prism with a bundler, install Prism with npm:
$ npm install prismjsYou 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.
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.