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 to highlight the code syntax. However, in this article, we are not discussing this WordPress plugin. Instead, we would like to bring our visitor’s 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, and SitePoint. If you are looking for a 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 the Download ‘button’.
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.
How to Use Syntax Highlighter
We have downloaded JS and CSS files which will highlight our code syntax. The next thing needs to see is how to use it in your actual code while displaying it on web pages.
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 PHP code then you should wrap your PHP code in the following way.
Notice we have used “<?php” instead of “<?php”. While using PRISM you must use characters < and > for ‘<‘ and ‘>’ respectively. Now if check your web page you should see your PHP code something like the below screenshot.
For writing a CSS code you need to use class language-css.
This CSS code will display on your website as follow:
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 check out 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. Alternatively, you can also check the WordPress plugin SyntaxHighlighter Evolved which we are using on our blog.
Related Articles
- How to Split the Terminal on Windows OS
- FTP/SFTP Extension for Visual Studio Code
- How to Download a Video from YouTube on Windows OS
If you liked this article, then please subscribe to our YouTube Channel for video tutorials.