Skip to content

Code Blocks with Highlighting: Beginning

Posted in Plugin Development, and WP Plugins

There are many ways to display code blocks on your WordPress site. You can always start with the standard <pre> and <code> tags, and apply your own styles. As you work with larger and larger code samples, you most likely will want to add additional functionality. Although there are some plugins in the WordPress.org repository, they all have their own advantages and disadvantages.

Over the next series of articles, we’re going to look at building a personalized plugin for displaying code, that includes:

  • Syntax Highlighting (multiple languages)
  • Optional Line Numbers
  • Optional Line Highlighting
  • Customizible CSS
  • Click to Copy to Clipboard
  • Custom Shortcodes

We’re going to make use of the following jQuery tools to do so:

Building Your Base

Step 1: Building your Custom PrismJS Files

PrismJS is modular in its approach. That means that you only include what you need, and leave out what you don’t want. This helps keep file size down and improve loading speeds. If you ever change your mind and want to add additional features, just complete this step again. When you create a PrismJS file, you will select from the following:

  • Theme
  • Languages
  • Add-Ons

Open the PrismJS download page in another tab. For the purposes of this  tutorial, we will be selecting the minified version, and building core with the default theme. For languages, I would suggest the defaults, PHP, PHP Extras, and any other languages that you use often.

We will also include the following add-ons:

  • Line Highlight : Allows you to highlight particular lines of code for added emphasis
  • Line Numbers : Numbers the lines of code to allow for easier reference

Once you’ve selected everything that you want, you can download your minified JavaScript file and your non-minified CSS file. Save them as prism.min.js and prism.css. Keep these handy for the next step.

Step 2: Building Your Plugin Framework

For this next step, it’s assumed that you are comfortable creating a blank plugin template. If you are not familiar with it, you can learn how in our upcoming Plugin Creation Crash Course series.

The following steps assume that your plugin has subdirectories /js/ for all of your javascript files, and /css/ for all of your css files. We will be using prism-js as our plugin name, and prism-js.php as our main plugin file. Copy prism.min.js and prism.css into the appropriate subdirectories.

prism-js/
|-- css
|	|-- index.php
|	`-- prism.css
|-- index.php
|-- js
|	|-- index.php
|	`-- prism.min.js
`-- prism-js.php

The following lines will go in your plugin’s primary php file (prism-js.php in our case), to enqueue the css and javascript files. Feel free to edit the header comments as you wish:

<?php
/**
* Plugin Name: Prism JS Custom Loader
* Plugin URI: https://www.wptechguides.com/code-blocks-with-highlighting-beginning/
* Description: A custom Syntax Highlighter
* Version: 0.1
* Author: Dan D
* Author URI: https://convexcode.com
**/
 
//enqueues all css files needed
function prism_js_enqueue_style() {
	wp_enqueue_style( 'prism-style', plugin_dir_url( __FILE__ ) . 'css/prism.css', false ); 
}
 
//enqueues all js files needed
function prism_js_enqueue_script() {
	wp_enqueue_script( 'prism-js', plugin_dir_url( __FILE__ ) . 'js/prism.min.js', false );
}
 
//calls both enqueue functions
add_action( 'wp_enqueue_scripts', 'prism_js_enqueue_style' );
add_action( 'wp_enqueue_scripts', 'prism_js_enqueue_script' );

The basic functionality is all there! Go ahead and activate your plugin, and now it’s time to try it out.

Step 3: Testing Your Plugin So Far

Once your plugin is activated, it’s time to test! Start a new post or page. In your post editor, be sure that you are on the “text” tab.

For your plugin currently, we are going to be using <pre> and <code> tags with specific classes. We will eventually replace these with custom shortcodes in a later tutorial. Let’s test with some PHP code. Create a code block using: <pre><code> to open, and </pre></code> to close.

Add the following classes to your opening <pre> tag:

class="line-numbers language-php"

and the following classes to your opening <code> tag:

class="language-php"

Place a sample line of PHP between the opening and closing <code> tags, and Publish or Update your page to view.

//Some PHP Code Here to Test
function did_it_work(){

	echo "This syntax highlighting worked!";

}

Congratulations! You’ve created a basic plugin using PrismJS to create code blocks with syntax formatting on your WordPress site. To change the language, just change the language class to the appropriate one. We will be expanding this plugin over the next few articles by giving it additional options, as well as exploring the use of line highlighting and other features. Until next time!

Source(s): http://prismjs.com/

Next In Series: Code Blocks with Highlighting: Copy to Clipboard