Home How To How to use prism.js code highlighter

How to use prism.js code highlighter

July 10, 2017 Leave a Comment
code

Prism is a lightweight, extensible syntax highlighter. Prism is used on several websites. It supports almost all languages.

Download prism.js from the website Download

Features

  • Wide browser support: IE9+, Firefox, Chrome, Safari, Opera, most Mobile browsers
  • Highlights embedded languages (e.g. CSS inside HTML, JavaScript inside HTML)
  • Highlight specific lines and/or line ranges

Using Prism.js

First we need to include the prism.css and prism.js files downloaded in our web page.

<!DOCTYPE html>
<html>
<head>

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

    
</body>
</html>

Prism.js works only with <code> elements, since marking up code without a <code> element is semantically invalid.

To highlight HTML code use <pre><code> in the following way. We need to replace all < with &lt;

<html>
<head>

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

<pre><code class="language-html">
<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
</head>
<body>
/*code for body*/
</body>
</html>
</code></pre>

</body>
</html>

To highlight css specify class=”language-css”.