Basic Usage
First You will need to include the prism.css and prism.js files.
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. 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).
Code:
<pre><code class="language-css">p{color:red}</code></pre>
Output
p{color:red}
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.
Examples
HTML Markup
Use the following code to use HTML syntax highlighter.
Usage:
<pre>
<code class="language-html">
HTML CODE ... </code>
</pre>
Example:
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h4 class="card-title">
Card title</h4>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.</p></div><ul class="list-group list-group-flush"><li class="list-group-item">Cras justo odio</li><li class="list-group-item">Dapibus ac facilisis in</li><li class="list-group-item">Vestibulum at eros</li></ul><div class="card-body"><a href="#" class="card-link">Card link</a><a href="#" class="card-link">Another link</a></div></div>
CSS Markup
Use the following code to use HTML syntax highlighter.
Usage:
<pre><code class="language-css">CSS CODE ... </code></pre>
Example:
a:active{outline:0}a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}
JS Markup
Use the following code to use HTML syntax highlighter.
Usage:
<pre><code class="language-js">HTML CODE ... </code></pre>
Example:
init:function(){var scroll_theme=($('.main-menu').hasClass('menu-dark')) ? 'light':'dark';this.obj=$(".main-menu-content").perfectScrollbar({suppressScrollX:true,theme:scroll_theme})},update:function(){if(this.obj){$(".main-menu-content").perfectScrollbar('update')}},enable:function(){this.init()},
Line Numbers
Line number at the beginning of code lines.
Obviously,this is supposed to work only for code blocks(<pre><code>
) and not for inline code. Add class line-numbers to your desired <pre>
and line-numbers plugin will take care.
Optional:You can specify the data-start(Number) attribute on the <pre>
element. It will shift the line counter.
Usage:
<pre class="line-numbers"><code class="language-css">p{color:red}</code></pre>
Example:
(function(){if(typeof self==='undefined' ||!self.Prism ||!self.document){return}}());
Line highlight
Highlights specific lines and/or line ranges.
You specify the lines to be highlighted through the data-lineattribute on the <pre>
element,in the following simple format:
- A single number refers to the line with that number
- Ranges are denoted by two numbers,separated with a hyphen(-)
- Multiple line numbers or ranges are separated by commas.
- Whitespace is allowed anywhere and will be stripped off.
Usage:
<pre data-line="2, 4, 8-10"><code class="language-css">p{color:red}</code></pre>
Example:
pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre.line-numbers>code{position:relative}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
Autolinker
Converts URLs and emails in code to clickable links. Parses Markdownlinks in comments.
URLs and emails will be linked automatically,you don¡¯t need to do anything. To link some text inside a comment to a certain URL,you may use the Markdown syntax:
Usage:
<pre><code class="language-css">@font-face{src:url(http://lea.verou.me/logo.otf)}</code></pre>
Example:
@font-face{src:url(http://lea.verou.me/logo.otf);font-family:'LeaVerou'}
Show Invisibles
Show hidden characters such as tabs and line breaks.
Example:
(function(){if(typeof self!=='undefined' &&!self.Prism || typeof global!=='undefined' &&!global.Prism){return}Prism.hooks.add('before-highlight',function(env){var tokens=env.grammar;tokens.tab=/\t/g;tokens.crlf=/\r\n/g;tokens.lf=/\n/g;tokens.cr=/\r/g;tokens.space=/ /g})})();
File Highlight
Fetch external files and highlight them with Prism. Used on the Prism website itself.
Use the data-srcattribute on empty <pre>
elements,like so:
Usage:
<pre data-src="myfile.js"></pre>
You don¡¯t need to specify the language,it¡¯s automatically determined by the file extension. If,however,the language cannot be determined from the file extension or the file extension is incorrect,you may specify a language as well(with the usual class name way).
Please note that the files are fetched with XMLHttpRequest. This means that if the file is on a different origin,fetching it will fail,unless CORS is enabled on that website.
Example: