Syntax Highlighting with Shades of Purple theme in WordPress

This post will help you add Shades of Purple syntax highlighting to your WordPress blog. I plan to actually sit down and write a custom WordPress plugin to do just that.

Due to the lack of time I’ve had to use this hacky setup that is not as optimized as I like it to be, but heck, it does work.

Step #0: What are we going to do?#

I’m going to install a WordPress plugin to bring support for both a syntax highlighter and Prism.js so that we can use the CSS version of Shades of Purple for Prism.js. Following is what the Shades of Purple syntax highlighting looks like.

/**
 * Shades of purple can be genius
 *
 * @param String hello Hello.
 * @since 1.0.0
 */

// String.
const sop = '🦄 Shades of Purple is an awesome syntax highlighting theme.';
console.log('sop', sop);

/**
 * Speed SVG CSS.
 *
 * @param Number one Angle to rotate the SVG.
 * @param Number two Angle to rotate the SVG.
 * @param Number three Angle to rotate the SVG.
 */
export const speedCSS = (one, two, three) => {
	btnBarSvgSpeed.css({
		transform: `rotate(${one}deg)`,
		transform: `rotate(${two}deg)`,
		transform: `rotate(${three}deg)`
	});
};

// Conditionals.
if (ahmad) {
	console.log('Ahmad loves open source');
} else if (awais) {
	console.log('Awais is making Shades of Purple');
} else {
	console.log(`Call it SOP for brevity`);
}

Step #1: Install APH Prism Syntax Highlighter#

Prism.js is one of the most popular syntax highlighters that widely used by a lot of blog or websites, some of them are popular websites, such as Mozilla, drupal, and SitePoint.

This plugin helps you add Prism.js based syntax-highlighting to your WordPress easily, provided with many features and user-friendly GUI, make it handy and easy to use. Though, it only works in the TEXT mode and of the Classic WordPress editor.

Step #2: Add Shades of Purple CSS#

After installing APH Prism Syntax Highlighter plugin, go to Settings ❯ Prism Highlighter menu and configure the plugin.

• Set Additional CSS to YES
• The copy the CSS from this Shades of Purple CSS Codepen and paste it into the textarea for Additional CSS
• I also recommend adding theme-shades-of-purple in the Add global class setting for future updates

This is it. Now go create a new post, select the TEXT tab instead of the VISUAL one when you are adding the code. I know it’s hacky. But this is it for now until I or someone builds a simple WordPress plugin to handle all this. I hope you and your readers enjoy high-quality syntax highlighting.

Peace! ✌️