PRISM – A Nicely Done Syntax Highlighter for Your Website

If you are running a programming blog or website which explains how to code then you need to display code on your web pages. Your visitors pay attention to your written code and learn from it. Because of this, you should display your code nicely on your website which helps your users to read it easily. It also gives a better user experience to your site visitors.

On this blog, we are using a WordPress plugin SyntaxHighlighter Evolved for highlight the code syntax. However, in this article we are not discussing about this WordPress plugin. Instead, we would like to bring our visitors attention to PRISM which is a widely used syntax highlighter on thousands of a website.

The most popular blogs which are using PRISM are Smashing Magazine, CSS-TRICKS, SitePoint. If you are looking for the solution on how to use syntax highlighter then read on.

Installation

In order to use PRISM code highlighter, you need to include their JS and CSS on your website. PRISM allows you to customize your choices on theme and language selection. Head over to the PRISM home page and click on Download ‘button’.

Download

On the next page choose the theme whichever will suit your website. Under the Languages section select the languages your website teaches about. Here, we recommend selecting only those languages which are required. Else your PRISM’s JS and CSS files will occupy unnecessary space.

Once you selected your options, scroll down to the bottom and download your customize JS and CSS files separately.

Download JS CSS

How to Use Syntax Highlighter

We have downloaded JS and CSS files which will highlight our code syntax. Next thing needs to see is how to use it in your actual code while displaying on web pages.

At first, you need to include these downloaded files on your website.

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

Next, PRISM provides a unique class for each supported language which we have to use while adding language syntax. For example, if you writing a PHP code then you should wrap your PHP code in following way.

PHP Code

Notice we have used “&lt;?php” instead of “<?php”. While using PRISM you must use characters &lt; and &gt; for ‘<' and '>‘ respectively. Now if check your web page you should see your PHP code something like below screenshot.

PHP Syntax Highlighter

For writing a CSS code you need to use class language-css.

CSS Code

This CSS code will display on your website as follow:

CSS Syntax Highlighter

In the same way for HTML and JavaScript syntax you need to use classes language-markup and language-js respectively.

To get the list of supported languages and their classes checkout this link.

Conclusion

In this article, we show you how to install and use PRISM syntax highlighter on your website. It adds a nice look for your code syntax which gives a better user experience for your visitors. Alternately, you can also check WordPress plugin SyntaxHighlighter Evolved which we are using on our blog.

Related Articles

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.

Leave a Reply

Your email address will not be published. Required fields are marked *