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`);
}
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.
- Set
Additional CSS
to YES
- Then 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 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! โ๏ธ