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.
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’.
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. 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.
Notice we have used “<?php” instead of “<?php”. While using PRISM you must use characters
> for ‘<' and '>‘ respectively. Now if check your web page you should see your PHP code something like below screenshot.
For writing a CSS code you need to use class
This CSS code will display on your website as follow:
To get the list of supported languages and their classes checkout this link.
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.
- 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.