Ahmad Awais



Syntax Highlighting with Shades of Purple theme in WordPress

Ahmad AwaisAhmad Awais

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) => {
		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 SettingsPrism Highlighter menu and configure the plugin.

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! ✌️


TheDevTakeaway: Developers' Newsletter!

Takeaway my professional opinion about Open Source, JavaScript/Cloud, Full Stack Development, building a business, growing a family, and everything in between! Delivered to your inbox once a month. 🤣 I'm even funny some times. 👻 I hate spam! Pinky Promise!

👨‍🏫 Edutainer & teacher at VSCode.pro 🎩 Full-time #OpenSourcerer 🦊 Google Developers Expert for Web 🥑 OSS Developer Advocate 🌳 Node.js Foundation Community Committee Member 🔥 Ridiculously hard-working Full Stack Web Developer 😂 Hilarious comedian ⓦ Regular WordPress Core Developer 📣 TEDx Speaker ✌️ Spends 50-80% of his time building professional FOSS (Free & Open Source Software) used by over 1,399,687 Developers 🙌 Cloud Community Evangelist 🎯 JavaScript & DevOps fanboy 💜 Loves his wife (Maedah) 🍕 Learn more about Ahmad ↣

Say 👋 on Twitter @MrAhmadAwais | Subscribe to the Developer's Takeaway!