If you have created a WordPress website that teaches coding, tutorials or programming, then you might need a syntax highlighter to visually distinguish your code. Although there are a number of syntax highlighters in WordPress, but there’s nothing like Prism.js syntax highlighter. Clean, modern and loaded with extensible features makes Prism stand out from the crowd. But, if you are struggling hard to integrate it in WordPress, we’ll make it easy for you.

 

Why Prism.js?

Prism is a lightweight and minimal syntax highlighter built with modern web standards in mind, which can be extended with features. Basically, it’s a combination of two files, prism.js (JavaScript file) and prism.css (CSS file). The javascript file consists of all the functions of the syntax highlighter, whereas, the CSS file consists the theme design and styling part.

The core version of Prism is relatively very small in size (minified and gzipped to 1.6k) and thus is one of the reasons of its popularity. The supplementary features that extend the script’s functionality include line numbering, Auto-linking,  line highlight, file highlight, and live previewers such as color, gradient or angle. You can learn more about it from Prism’s Official Website.

For an example, you can make this dull code,

<html>
<body>
<p>I'm a paragraph.</p>
<img src="background.jpg"></img>
</body>
</html>

 

Look like this with Prism.js

<html>
<body>
<p>I'm a paragraph.</p>
<img src="background.jpg"></img>
</body>
</html>

 

Meaningless to ask, which one looks better. Right? But it won’t show up like this until you set it up correctly. The official website doesn’t demonstrate on how to integrate it. Maybe they are expecting us to be programmers. Don’t worry if you are not a one, we have made it easy for everyone. Good rhyming ..huh!

 

Integrate prism.js in WordPress

While this syntax highlighter may be popular and easy to use, but installing prism.js could be tricky as you have to mess with your WordPress theme files. You need to register and activate the prism.css and prism.js files before implementing it on your site, and this is to be done in one of the core theme files, functions.php. Therefore, you need to very careful while editing the core files. This is why it is recommended to use Child themes, as you won’t lose any changes you have made if you have to update the theme.

 

But then, there’s again a problem if you are a WordPress visual editor user. The visual editor is the default editor which loads up when you click the add a new post link. Other one, the Text editor is an HTML based editor, which works on HTML markup to write content. Since the Prism.js is dependent on the pre (preformatted) and code tags, you have to use the boring text editor and make use of the <pre> and <code> tags to implement your code on the website. If you love working on HTML, you can use the text editor for writing content. If you do not want to try markup, you can use a plugin to support Prism.js on your website.

Whichever finds you best, the Prism’s functionality remains same. Though the latter option is much easier and faster, just install the plugin and add the code, as simple as that. But if you don’t want to add a new plugin to the list, you can integrate Prism directly in your theme.

 

Let’s get started by downloading the core files plus any extended functionality, if you opt to add, from the Prism website. Select the theme of your choice, and a few language files you want to work with. Check the features from the list and finally, download the required files.

If you are using the plugin, the files come pre-installed with the plugin automatically, a one more reason to use the plugin. But it’s just the core version of the Prism. If you need extra functionality, you need to download the customized files from the official website.

Once you get those prism.js and prism.css files, you are ready to start the process. You can skip the following section if you’re using the plugin. Here’s the way to install the script without the plugin.

 

1. Upload the files in your theme’s directory

Login to your Remote directory using Cpanel (or any other) File Manager. Browse wp-content > Themes > Your-theme-nameYou can put the files directly into this location or you can put these files in different JS and CSS folder. I would recommend you to upload the files in it’s corresponding folders, i.e JS, and CSS folders in order to maintain consistency throughout the theme. While uploading the files, make sure to change the permissions to 7,4,4 in order to make it work properly.

Permission modes- Integrating prism.js in WordPress

 2. Register the script and style files in your theme

Here comes the tough part, as you’ll need to edit the functions.php file of your current theme. Browse to your root directory of your theme and there you will find the functions.php file. Open it and copy this code at the bottom of your functions.php file.

<?php

// Function to add prism.css and prism.js to the site
function add_prism() {
//To register the prism.css
wp_register_style( 
'prismCSS', //Handle name to register and enqueue prism.css
get_stylesheet_directory_uri() . '/css/prism.css' // location of the prism.css file
);
// Register prism.js file
wp_register_script( 
  'prismJS', //Handle name to register and enqueue prism.js
get_stylesheet_directory_uri() . '/js/prism.js' // location of the prism.js file
);
// Enqueue the registered style and script files
wp_enqueue_style('prismCSS');
wp_enqueue_script('prismJS');
}
add_action('wp_enqueue_scripts', 'add_prism');
?>

 

The wp_register_style and wp_register_script are used to register the files before using them. Inside these functions, the PrismCSS and PrismJS are used as handle name so that it can be used to register and enqueue the files. You can think it as a variable in programming. The get_stylesheet_directory_uri() is used to access the theme’s root folder. ‘/prism.css’ or ‘/prism.js’ is the location of the prism.css and prism.js files. If you have put them in their corresponding folders, then you have to supply the path like this ‘/css/prism.css’ or ‘/js/prism.js’

wp_enqueue is used to enqueue (activate) the registered style or script.

And now Prism.js is ready to be used in your Website. Open your post in the text editor and include the code inside the <pre><code>. And make sure to provide the language in the class attribute of code tag, like this

<pre><code class="language-markup">
    //Some html stuff here
</code></pre>

 

Using the plugin

If you want to work with the plugin, download the plugin from WordPress Repository. Using plugin wouldn’t be a headache for you, in fact, it has a lot many advantages. It works flawlessly in the Visual editor, so you could stick with your old friend. Through plugin, adding code into your page is just one button away. Simply click the button on the Editor toolbar, add your code and click OK.

By default, the plugin uses the minimal version of Prism. But, it does provide an option to include custom Prism files in it’s setting page. After you have installed the plugin, in your Dashboard, go to Settings > Prism and make the following changes.

plugins options Integrating prism.js image

 

You need to upload the alternate prism.js and prism.css file in the plugins directory.  If you have downloaded the custom files, rename them to prism1.css and prism1.js. Then, open up your remote file manager, and browse to wp-content > plugins > wp-prism-syntax-highlighter and upload the prism1.css into CSS folder and prism1.js to JS Folder. That’s it!

 

Note: While using the add code function in the editor, you might face some difficulty in clicking the OK button. The button is hidden off the screen and there’s no scrollbar to reach there. I hope the issue gets fixed in the next update, until then, you have to zoom out till the button is visible.

 

Conclusion

Prism is quite famous around the web and many great websites are using Prism.js as their code syntax highlighters. It’s relatively small in size as compared to other syntax highlighters, and can be extended with extra functionality. Although there is an official plugin for using Prism.js, integrating directly into websites save the disk space and speeds up by eliminating the requests made to the plugin. I’m sure this won’t trouble you again.

Share on Facebook Tweet on Twitter Post on Google+ Buffer