How to use Code Syntax Highlighter in Knowledge Base

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

Please note that currently syntax highlighting will only visible when you view the document either in Draft orr Publish status

 

Here is a list of popular & available languages:

Language Class
Markup languange-markup
CSS language-css
HTML language-html
Javascript language-javascript
C language-c
C# language-csharp
C++ language-cpp
ASP.NET (C#) language-aspnet
JSON language-json
Markdown language-markdownSWIFSSWIfssw
PHP language-php
VB.Net language-vbnet
vim language-vim
Visual Basic language-visual-basic

Full list here

Created on 12 March 2020 by Michael Christian. Last modified on 17 March 2020

Was this helpful?  

1 Like
Share