One of the basic needs for articles/blogs that features programming code is syntax highlighting. Google Prettify is one of the most famous ways to enable code highlighting on your website. We have created a module to be installed and used in Sitecore XP that will let you enjoy this feature so your code snippets will look beautiful and easy to read. It amazingly supports different programming languages including C#, Java, HTML, CSS, and JavaScript.
Why do you need such a module?
Unformulated code is harder to read and doesn't look great. The Google Code Prettify Module will take care of decorating the code quickly because it is efficiently developed. It also supports various code colour themes as well as the ability to edit the CSS file yourself to define your own style.
How to install the module?
Download the Rich Text Editor Code Snippet package from Sitecore Marketplace and install it using the Installation Wizard (Sitecore client’s Desktop --> Development Tools --> Installation Wizard).
for more information on how to install a module or package on a production site you can confidently click here!
Notes:
- To enable Google Prettify highlighting you need to add the following script to the main layout as well as link to the CSS file.
<script src="/sitecore/shell/controls/rich text editor/code snippet/GooglePrettify.js" /><link href="/sitecore/shell/controls/rich text editor/code snippet/CodeSnippet.css" rel="stylesheet"/>
- You can use "/sitecore/shell/controls/rich text editor/code snippet/CodeSnippet.css" file to add your own code snippet styles.
How-to Guide:
You can use the module on any "Rich text Editor" to add a code snippet to it. Please follow the steps below to add a code snippet:
- Find your targeted “Rich Text Editor” and click “show editor”
- You can now locate “Code Snippets” icon at the top icon bar
- Click on the icon, a pop-up window will appear so you can insert you code
- Your code should look similar to this depending on the language
