Ahmad Awais

NAVIGATE


SHARE


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) => {
	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 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! โœŒ๏ธ

Founder & CEO at Langbase.com ยท Ex VP DevRel Rapid ยท Google Developers Advisory Board (gDAB) founding member. ๐Ÿง‘โ€๐Ÿ’ป AI/ML/DevTools Angel Investor โฏ AI/ML Advisory Board member San Francisco, DevNetwork

๐ŸŽฉ Award-winning Open Source Engineer & Dev Advocate ๐ŸฆŠ Google Developers Expert Web DevRel ๐Ÿš€ NASA Mars Ingenuity Helicopter mission code contributor ๐Ÿ† 8th GitHub Stars Award recipient with 3x GitHub Stars Award (Listed as GitHub's #1 JavaScript trending developer).

๐ŸŒณ Node.js foundation Community Committee Outreach Lead, Member Linux Foundation, OpenAPI Business Governing Board, and DigitalOcean Navigator. ๐Ÿ“Ÿ Teaching thousands of developers Node.js CLI Automation (100 videos ยท 22 Projects) & VSCode.pro course. Over 142 Million views, 22 yrs Blogging, 56K developers learning, 200+ FOSS.

โœŒ๏ธ Author of various open-source dev-tools and software libraries utilized 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.