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 Settings โฏ Prism 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! โœŒ๏ธ

Helping businesses build developer-led adoption for 10+ yrs.
VP of Developer Relations (DevRel, DX Eng., Dev Content Docs) at RapidAPI. I'm Hiring!

๐Ÿ“Ÿ Edutainer at Node.js CLI Automation course (100 videos ยท 22 Projects) & VSCode.pro course. Over 36K devs learning. ๐ŸŽฉ Award-winning Open Source Engineer & Dev Advocate ๐ŸฆŠ Google Developers Expert Web DevRel ๐Ÿš€ Mars Ingenuity Helicopter code contributor ๐Ÿ† 8th GitHub Stars Award recipient ๐ŸŒณ Node.js foundation Community Committee Outreach Lead, Member Linux Foundation, OpenAPI Business Governing Board, and DigitalOcean Navigator.

โœŒ๏ธ Author of various open-source dev-tools and software libraries used by millions of developers worldwide โ“ฆ WordPress Core Developer ๐Ÿ“ฃ TEDx Speaker with 100+ international talks.

๐Ÿ”ฅ Satya Nadella ยท CEO of Microsoft, said โ€” Awais is an awesome example for developers.
๐Ÿ™Œ Leading developers and publishing technical content for over a decade ๐Ÿ’œ Loves his wife (Maedah) โฏ Read more about Ahmad Awais.

๐Ÿ‘‹โ€ฆ Awais is mostly active on Twitter @MrAhmadAwais


Developers Takeaway

Takeaway my professional opinion on open-source, developer relations, growing your business with family, and everything in between! Delivered to your inbox a couple of times every year. I'm even funny at times. I hate spam โ€” pinky-promise!

๐Ÿ‘จโ€๐Ÿ’ป๐Ÿ‘ฉโ€๐Ÿ’ป 168,174 Developers Already Subscribed
Comments 0
There are currently no comments.