Add Prism.js syntax highlighting to HTML or any website?
PrismJs is a library written in JavaScript, which is used for syntax highlighting or code highlighting. Also, Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in millions of websites, including some of those you visit daily.
What is PrismJS?
Prism is a lightweight, robust, and elegant syntax highlighting library. We can add any programming language syntax to display code with styling CSS to any website or web application.
Software requirements:
Prism can run on almost any browser, we just need to include and implement JavaScript and CSS file to the project.
Features of PrismJS
- It's a lightweight, the core library is of 2KB Size when minified and gzipped. Supports a wide variety of languages. According to the official documentation, it supports 275+ languages.
- Simple to use: Include prism.css and prism.js, use proper HTML5 code tags (code.language-xxxx), done!
- All styling is done through CSS, with sensible class names like .comment, .string, .property etc
- Easy to start with any tech stack like WordPress, React, Angular etc PrismJS can be easily extended with the help of a hook and without modifying the code.
- Easy to understanding of regular expression, and therefore we can extend or define new languages.
- Supports most of the browsers such as Edge, IE11, Firefox, Chrome, Safari, Opera.
- Enforces to use the <code> mark up and also supports inline code with <pre> tags. The language is defined through the way recommended in the HTML5 draft: through a language-xxxx class.
Used By
Prism is used on several websites, small and large. Some of them are: Smashing Magzine, Drupal, A List Apart, React, Stripe, CC-Tricks, Sitepoint, MySQL and many more.
How to Implement PrismJS syntax highlighting to HTML or any website?
Step 1: Download the PrismJs library from the official website by clicking on the download button.
Select the Compression level: minified version, the theme you like, and check mark all the coding languages that you want Prism to recognize and highlight in your website or article.
Additionally, you can select the theme of your choice, based on your priority and interests.
- Minified version
- Select Theme
- Select Languages
- Select Plugins (optional)
Step 2: Once you have finished the selection, click on the Download JS and Download CSS button at the bottom of the page to download the generated prism.js and prism.css files.
<!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.
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>
Inline code snippets are done like this (without <pre>):
<code class="language-css">p { color: red; }</code>
Note: You have to escape all < and & characters inside <code> elements (code blocks and inline snippets) with < and & respectively, or else the browser might interpret them as an HTML tag or entity. If you have large portions of HTML code, you can use the Unescaped Markup plugin to work around this.
Step 3: The files are included, and you are ready to use PrismJS as a syntax highlighter. Let’s take an example to highlight CSS code.
If you want to highlight CSS code, you need to use CSS class as "language-css." For JavaScript, it will be "lang-js" or "lang-JavaScript".
For CSS
<pre><code class="language-css">p { color: red }</code></pre>
For JavaScript
<pre><code class="language-js">console.log("Hello World")</code></pre>
Note: Do not add any space between the <pre> and <code> the same will be displayed on the page. Also since it’s a plain HTML do not add any line breaks inside the <pre> and <code> tags.
Supported languages
This is the list of all 288 languages currently supported by Prism, with their corresponding alias, to use in place of xxxx in the language-xxxx (or lang-xxxx) class:
you can use the below class to highlight the code. For the entire list of classes for each language, you can refer to https://prismjs.com/#languages-list