Prism syntax highlighting on WordPress with and without a plugin

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in thousands of websites, including some of those you visit daily.

You can refer their official website to know more about the highlighter: prismjs.com. This post is for those who would like to make use of its syntax highlighting feature in their posts. There are two methods to achieve this:

Option 1 – Use the plugin

Just access the wordpress.org plugin directory and get this plugin installed for the website: Prism Syntax Highlighter. This is the fastest way to achieve syntax highlighting. Let’s check the Pros and Cons

PROS:

  • Permissions to install plugin in the dashboard is the only requirement to enable this
  • You have most of the options provided from the official release.
  • Updates to Prism are maintained by plugins authors

CONS

  • You will have to depend on the plugin author to update any bug fixes that Prism rolls
  • Once you set up the highlighting style, you will have no use of all the other options and extra files the plugin carries around
  • There are limitations to the personalization you can make. You can take a look at the actual number of optins prism provides: Download

Option 2 – Update your theme’s functions.php

I recommend this option to anyone who has knowledge with accessing their website files (File manager, FTP etc) and uploading new files to the server and using the edit tool to copy and paste contents. Please make sure you backup all your website content before making any changes.

  1. Access the Official Download link and select the theme you would like to use, the languages you would like to highlight and additional plugins you would like to enable on the code snippet. For example copy to clipboard, line number highlighting etc At the moment, we use the default theme (which is auto selected if you do not opt for a theme)
  2. Scroll down to find two download options. Download JS and Download CSS. You’ll need both the files for Prism to work.
  3. Save both the files in a folder. Let’s say “Prism” and then upload it inside your theme folder ( This is generally public_html/wp-contents/themes/your_theme_name/HERE!) using FTP or file manager.
  4. You will now need to edit the functions.php file. This file would be in the root folder of your theme. It is the same folder where you uploaded the prism files (folder) in the previous step.
  5. Add this piece of code in the last line (just before ?>).
Some theme functions.php will not have PHP close tags ?> . In such case, you can just put this piece of code below the last line of the file.
// Prism syntax highlighting
function prism_syntax_highlight() {
// Register prism.css file
wp_register_style(
'prismCSS', get_stylesheet_directory_uri() . '/prism/prism.css' // location of css file
);
// Register prism.js file
wp_register_script(
'prismJS', get_stylesheet_directory_uri() . '/prism/prism.js' // location of js file
);
// Enqueue the registered style and script files
wp_enqueue_style('prismCSS');
wp_enqueue_script('prismJS');
}
add_action('wp_enqueue_scripts', 'prism_syntax_highlight');

Usage

You will need to enter your code snippets inside the pre and code tags as shown in the example below for this to work:

<pre><code class="language-markup">
YOUR CODE SNIPPET HERE
</code></pre>

The above example is for highlighting html snippets. If you would like to use it to highlight php tags, just use the below code:

<pre><code class="language-php">
YOUR CODE SNIPPET HERE
</code></pre>

You will only need to update the language you’re using here: code class="language-php"

Update: If you’re having trouble with the copy to clipboard button, please check this post : Copy to Clipboard Fix

/ /

Report (Please include link to post while reporting)

Leave a Reply

Your email address will not be published. Required fields are marked *