How to use PRISM.JS syntax highlighter with WordPress

Prism.js is one of the most widely used tool for syntax highlighing. I have been using Crayon Syntax Highlighter for a while but in some cases, I am not happy with the result. When I was using ghost bloging platform, I was using PRISM.JS and output was very satisfying. so I decided to give it a another try.

There are few plugins but I was none of them look promising so I decided to add PRISM.JS to my wordpress site the crude way.

Step#1 Download prism javascript and css files. You can customize whichever language you want to use and download file size will vary accordingly.

select development or  version along with the required languages.

download prism.js and prism.css files. Please note the size of the files based on the languages that you have selected.

Step#2 Copy prism.js and prism.css files to your themes public files folder and add following function


function my_scripts_enqueue() {

wp_enqueue_style ('prism-css', get_theme_file_uri().'/css/prism.css');
wp_enqueue_script ('prims-js', get_theme_file_uri().'/js/prism.js');

}
add_action( 'wp_enqueue_scripts', 'my_scripts_enqueue' );

Step#3 Using the prims.js

For using primsjs, you need to go to “Text” section of any post and add code inside below tags. Also, you need to menstion name of the language in class.


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

If you are already using “Crayon Syntax Highlighter”, you need to disable it before prims.js to take effect.

 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.