PrisimJS Featured Image

How to Implement Prism Syntax Highlighter into WordPress

If you want to display code blocks on your WordPress site in a beautiful and unique way then you arrived at the right place, because in this tutorial I will teach you how to implement Prism syntax highlighter into WordPress.

As a regular CSS-Tricks reader, I’ve always wondered how Chris display code blocks in his site in this unique way. A bit of research and I discovered that he uses PrismJS.


prismjs_used_by

What is PrismJS?

Coded by MichaiLEA Verou, PrisimJS is a Syntax Highlighter for the crazy one, the troublemakers and the ones who see things differently. It supports dozens of languages and has many modules and themes to choose from.


PrismJS Example:

Take a look at the code below, and see how colorless it is, plain, old, boring code block.

div {
color: rgba(255, 0, 0, 0.2);
background: red;
border: 1px solid hsl(100,70%,40%);
background: linear-gradient(to right, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%);
transition: color 0.3s linear;
transition-timing-function: ease;
transition: all linear 3s;
transform: rotate(.4turn);
}

Now look at this one, see how beautiful, colorful, and full of life it is!

    
div {
color: rgba(255, 0, 0, 0.2);
background: red;
border: 1px solid hsl(100,70%,40%);
background: linear-gradient(to right,  #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%);
transition: color 0.3s linear;
transition-timing-function: ease;
transition: all linear 3s;
transform: rotate(.4turn);
}

And most important, it’s much easier to read and understand.

HINT: Try hovering over the Color, Gradient, Transition, Time and Angle to see a preview of them.

I’m sure after you saw this, you want to implement it on your site. If you use WordPress then you are in luck because now I will teach you, step by step, how to do just that.


How to implement Prism syntax highlighter into WordPress?

Step 1:

Visit the Download PrismJS page and select which languages, modules and theme you want.

Scroll down to the bottom and click on the Download JS and Download CSS buttons.

I personally use the Okaidia theme with slight modifications to the colors and header size.

Step 2:

Create a folder on your desktop and name it PrismJSSH.

Inside the folder PrismJSSH, create another folder and call it assets.

Inside the folder assets, create two folders, name the first CSS and the second JS.

Important: Do not change the name of the folder assets and its sub-folders.

Step 3:

Copy the files you downloaded each to its perspective folder:
Prism.js to assets/js.
Prism.css to assets/css.

Step 4:

Create a file and call it PrismJSSH.php inside the PrismJSSH folder.

Step 5:

Open PrismJSSH.php in your favorite text editor. I use Sublime Text because it’s an awesome text editor and freakishly fast.

Step 6:

Inside PrismJSSH.php copy and paste the code below:

    
<?php
/*
Plugin Name: Prism Syntax Highlighter
Description: Awesome Syntax Highlighter made with JS & CSS
Version: 1.0
Author: Ahmad Al Maaz
Author URI: https://www.news47ell.com
*/
        wp_enqueue_style( 'PrismCSS', plugin_dir_url( __FILE__ ) . 'assets/css/prism.css' );
        wp_enqueue_script( 'PrismJS', plugin_dir_url( __FILE__ ) . 'assets/js/prism.js', array('jquery') );
?>

Step 7:

Compress the folder PrismJSSH using 7Zip or WinRAR.

Step 8:

Go to your WordPress admin dashboard / Plugins / Add New / Upload Plugin.

Step 9:

Click on Choose file or Drag & Drop the .zip file over it / Click Install Now / Active Plugin.

Step 10:

Pat yourself on the back because you just made your “first” WordPress plugin. Congratulation.

Clear your website’s cache and write some code and preview it. It should work.

If you are too lazy to do all of this, just download the plugin I made which contain support for all the languages, and all the modules with the default theme by Clicking Here.