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 will install a WordPress plugin to support 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 widely used by many blogs 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 a user-friendly GUI, making 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 the APH Prism Syntax Highlighter plugin, go to Settings โฏ Prism Highlighter Menu and configure the plugin.

This is it. Now 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 and Google Developers Advisory Board (gDAB) founding member.

๐Ÿ“Ÿ 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.

โœจ As quoted by: Satya Nadella ยท CEO of Microsoft โ€” 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

Stay ahead in the web dev community with Ahmad's expert insights on open-source, developer relations, dev-tools, and side-hustles. Insider-email-only-content. Don't miss out - subscirbe for a dose of professional advice and a dash of humor. No spam, pinky-promise!

โœจ 172,438 Developers Already Subscribed
Comments 0
There are currently no comments.