Category: JavaScript

An Apex Brush For SyntaxHighlighter Evolved

I recently started using the great SyntaxHighlighter Evolved plugin to highlight some code samples I am posting. It is a great plugin if you haven’t tried it yet.

While looking at the available brushes (these are what color the different parts of the code), I noticed that there was no option for Apex, which is the language used to write code to extend the Salesforce Platform. So, I created a plugin of my own which registers the Apex Brush with SyntaxHighligher and make it aware of it so that the Apex brush can be presented as an option to the user.

Note that while you could edit the SyntaxHighlighter Evolved plugin file directly, doing so risks your changes being overwritten if the plugin is updated by the author. It is safer to write your own plugin and register it so that it can live independent of the upgrades.

The first step in creating this plugin is to create a folder under your wp-content/plugins folder I called my folder apexBrushSyntaxHighlighter. Below is my folder structure:

wp-content folder structure showing the new folder.
wp-content folder structure

Once you have the folder created, you will need to store 2 files under it:

  • A JavaScript file which defines the styles to be used to highlight the code
  • A PHP file which registers the new brush with the SyntaxHightlighter Evolved plugin.

I called my JS and PHP Files shBrushApex.js and apexBrush.php respectively. Below is the code for each file.

Apex Brush JS Code

/* 
**************************
shBrushApex.js:
**************************
*/

SyntaxHighlighter.brushes.Apex = function()
{
    var funcs = 'debug runAs';
    var keywords = 'case catch class do else if enum final for From global global if in inherited sharing interface new null override private protected public return \
Select static super switch System this transient try void Where while with sharing without';
    var datatypes = 'Blob Boolean Date Datetime Decimal Double ID Integer List Long Map Object Set String Time';

    this.regexList = [
        { regex: SyntaxHighlighter.regexLib.singleLineCComments,	css: 'comments' },		// one line comments
		{ regex: /\/\*([^\*][\s\S]*?)?\*\//gm,						css: 'comments' },	 	// multiline comments
        { regex: SyntaxHighlighter.regexLib.multiLineDoubleQuotedString,	css: 'string' },
		{ regex: SyntaxHighlighter.regexLib.singleLineCComments,	css: 'comments' },
		{ regex: SyntaxHighlighter.regexLib.multiLineCComments,		css: 'comments' },
		{ regex: SyntaxHighlighter.regexLib.singleQuotedString,		css: 'string' },
		{ regex: SyntaxHighlighter.regexLib.doubleQuotedString,		css: 'string' },
        { regex: new RegExp(this.getKeywords(funcs), 'gmi'),				css: 'color2' },
        { regex: new RegExp(this.getKeywords(keywords), 'gmi'),				css: 'keyword' },
        { regex: new RegExp(this.getKeywords(datatypes), 'gmi'),				css: 'variable' },
        { regex: new RegExp('^@[aA-zZ]*$', 'gmi'), css: 'color1'} //annotatations
        ];
};

SyntaxHighlighter.brushes.Apex.prototype = new SyntaxHighlighter.Highlighter();
SyntaxHighlighter.brushes.Apex.aliases	= ['apex', 'Apex', 'apx'];

Apex Brush For SyntaxHighlighter Plugin Code

Note: this is a plugin file. You have to create a new directory under your wp-content folder and add this PHP file and the above JS file in that directory. The plugin will register the brush with SyntaxHighlighter Evolved.

<?php
/*
Plugin Name: Apex Brush For SyntaxHighlighter Evolved
Description: Adds support for the Salesforce Apex language to the SyntaxHighlighter Evolved plugin.
Author: Sudhir Durvasula
Version: 1.0.0
Author URI: https://salesforceduo.com/
*/
 
// SyntaxHighlighter Evolved doesn't do anything until early in the "init" hook, so best to wait until after that
add_action( 'init', 'syntaxhighlighter_apexBrush_regscript' );
 
// Tell SyntaxHighlighter Evolved about this new language/brush
add_filter( 'syntaxhighlighter_brushes', 'syntaxhighlighter_apex_addlang' );

// Set aliases for the language
add_filter( 'syntaxhighlighter_brush_names', 'syntaxhighlighter_apex_addBrushName');
 
// Register the brush file with WordPress
function syntaxhighlighter_apexBrush_regscript() {
    wp_register_script( 'syntaxhighlighter-brush-apex', plugins_url( 'shBrushApex.js', __FILE__ ), array('syntaxhighlighter-core'), '1.0.0' );
}
 
// Filter SyntaxHighlighter Evolved's language array
function syntaxhighlighter_apex_addlang( $brushes ) {
    $brushes['apex'] = 'apex';
    $brushes['Apex'] = 'apex';
 
    return $brushes;
}

// Add brush name to be exposed in the block's language dropdown
function syntaxhighlighter_apex_addBrushName( $brush_names ) {
    $brush_names['apex'] = __( 'Apex', 'syntaxhighlighter' );
    
    return $brush_names;
}
 
?>

Apex Syntax Highlighting Sample

System.debug('===');
String a;
Integer i;
@AuraEnabled
public static void test() {
  this.name = 'Sudhir';
};

@isTest
public static void test2() {
  this.name = 'Sudhir';
};

That’s all there is to it! Easy, peasy. Lemon squeezy.