What is Code Syntax Highlighter?

Syntax Highlighter is a feature of text editors that are used for programming, scripting, or markup languages, such as HTML. The feature displays text, especially source code, in different colours and fonts according to the category of terms.

How to enable it?

https://prismjs.com/

It is possible to use third-party syntax highlighter plug-ins provided by PRISM for instance to a Knowledge Base article.

Step1: Edit CKEditor configuration

Navigate to Labs > Edit CKEditor configuration (under Other)

Add the following lines to the editor

config.extraAllowedContent += 'code(language-*);';

Click Save

Step 2: Adding Javascript Plugin from PRISM

Navigate to Admin / Scripts

Copy and paste the following plug-ins Before </body> closing tag

<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/themes/prism.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/plugins/autoloader/prism-autoloader.min.js"></script>

click Save.

How to use it?

Here is an example on how to use it in the Knowledge Base article

1. Paste the code in the rich-text area

2. Highlight the code and change it to Formatted

3. Keeping them highlighted under Style select Computer Code

4. Switch to view the Source

Add a class to the code tag to specify the applicable language, for example class="language-html"

5. Save and Update Article

Here is a list of popular & available languages:

Full list here