{"id":5827,"date":"2019-08-28T13:14:07","date_gmt":"2019-08-28T08:14:07","guid":{"rendered":"https:\/\/ahmadawais.com\/?p=5827"},"modified":"2023-06-12T15:15:47","modified_gmt":"2023-06-12T10:15:47","slug":"shades-of-purple-wordpress","status":"publish","type":"post","link":"https:\/\/ahmadawais.com\/shades-of-purple-wordpress\/","title":{"rendered":"Syntax Highlighting with Shades of Purple theme in WordPress"},"content":{"rendered":"

This post will help you add Shades of Purple<\/strong> syntax highlighting to your WordPress blog. I plan to actually sit down and write a custom WordPress plugin to do just that.<\/p>\n

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.<\/p>\n

Step #0: What are we going to do?#<\/a><\/h3>\n

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.<\/p>\n

\/**\r\n * Shades of purple can be genius\r\n *\r\n * @param String hello Hello.\r\n * @since 1.0.0\r\n *\/\r\n\r\n\/\/ String.\r\nconst sop = '\ud83e\udd84 Shades of Purple is an awesome syntax highlighting theme.';\r\nconsole.log('sop', sop);\r\n\r\n\/**\r\n * Speed SVG CSS.\r\n *\r\n * @param Number one Angle to rotate the SVG.\r\n * @param Number two Angle to rotate the SVG.\r\n * @param Number three Angle to rotate the SVG.\r\n *\/\r\nexport const speedCSS = (one, two, three) => {\r\n\tbtnBarSvgSpeed.css({\r\n\t\ttransform: `rotate(${one}deg)`,\r\n\t\ttransform: `rotate(${two}deg)`,\r\n\t\ttransform: `rotate(${three}deg)`\r\n\t});\r\n};\r\n\r\n\/\/ Conditionals.\r\nif (ahmad) {\r\n\tconsole.log('Ahmad loves open source');\r\n} else if (awais) {\r\n\tconsole.log('Awais is making Shades of Purple');\r\n} else {\r\n\tconsole.log(`Call it SOP for brevity`);\r\n}<\/pre>\n
Step #1: Install APH Prism Syntax Highlighter<\/strong><\/a>#<\/a><\/h3>\n
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.<\/p>\n
This plugin<\/a> 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<\/code> mode and of the Classic WordPress editor.<\/p>\n
Step #2: Add Shades of Purple CSS#<\/a><\/h3>\n
After installing the APH Prism Syntax<\/a> Highlighter<\/a> plugin, go to Settings<\/code> \u276f Prism Highlighter<\/code> Menu and configure the plugin.<\/p>\n