Prism syntax highlighter is very lightweight and relies on both a CSS and a JS file.It is easily customizable and has support for some plugins to extend its functionality. Also it built with modern web standards in mind. It’s used in millions of websites, including some of those you visit daily. Currently Prism supports 264 languages. You can see all supported languages here.
Quick Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Trackerdisk</h1>
<p>This is a paragraph.</p>
</body>
</html>
Getting Started
Now let's see how write the elements to be highlighted by Prism. In this example I will show you how to add Prism syntax highlighter for CSS. (language-css).
1. Go to download page. You can select compression level, as well as the languages and plugins.
2. Include downloaded (prism.js and prism.css) files into your project and you are good to go.
<!DOCTYPE html>
<html>
<head>
<link href="css/themes/prism.css" rel="stylesheet" />
</head>
<body>
<script src="js/prism.js"></script>
</body>
</html>
3. Include the code block that we need to highlight. The recommended way to mark up a code block is a <pre> element with a <code> element inside, like so:
<pre><code class="language-css">p { color: red }</code></pre>
Complete Example
This is the complete example with output. This is very simple integration.
<!DOCTYPE html>
<html>
<head>
<link href="css/themes/prism.css" rel="stylesheet" />
</head>
<body>
<h1>My First Prism Code Snippet</h1>
<pre><code class="language-css">p { color: red }</code></pre>
<script src="js/prism.js"></script>
</body>
</html>
Here are some different classes use for some other languages. Also Prism has lots of features. Take your time to explore and find the ones fitting your needs.
| Language | Class |
|---|---|
| HTML | language-markup |
| Javascript | language-javascript |
| PHP | language-php |
| C++ | language-cpp |
If you have any questions about this article, feel free to leave a comment.