Code Highlighter

 

Code highlighter styles & highlights the code syntax in your source code for better readability and understanding. With the ProProfs Knowledge Base editor, you can easily format the source code in different colors to distinguish the code syntax without affecting its functionality.

 

Here is how the Code Highlighter formats your code syntax for multiple languages:

 

  • Ruby

 

Code Highlighter highlighting the Ruby programming language syntax

 

  • JSON

 

Code Highlighter highlighting the JSON programming language syntax

 

  • PHP

 

Code Highlighter highlighting the PHP programming language syntax

 

Code Highlighter is beneficial as it:

 

  • Denotes the class variables, parameters, and functions in your code.

  • Facilitates a better understanding of the code structure.

 

In this article, you will learn:

 

  1. How to Use the Code Highlighter

  2. How to Edit the Code Snippet

  3. How to Resolve the CSS Conflicts

  4. Supported Languages

 

 

How to Use the Code Highlighter

 

Step 1: Open the ProProfs Knowledge Base page editor and click Insert > Code Highlighter

 

Select Code Highlighter from the Insert menu in the toolbar

 

NOTE: The code editor will auto-detect the code language when you paste the code. For reference, we have used PHP Code syntax.

 

Step 2: Select the code language and format style in the Code Highlighter screen overlay. Now paste the code and click OK

 

Add or update a code snippet

 

Step 3: Click “Save Draft” and “Preview” simultaneously to see the changes

 

Save your changes and preview the code highlighter feature

 

Here is how the page with highlighted code syntax will appear

 

Preview of a highlighted code syntax

 

NOTE: Formatting will only appear when you are viewing a page. When editing a page, you will see the raw code you entered. To preview it, save the page and click Preview in the toolbar. 

 

How to Edit the Code Snippet

Step 1: Open the Proprofs Knowledge base page editor, right-click on the code input area, and select “Edit code snippet”

 

Step 2: Make the changes in the code and click “Save Draft” when finished

 

Edit Code Snippet and Save your changes

 

How to Resolve the CSS Conflicts

There may be some CSS conflicts if your website is older than 3/6/2014. To resolve this

 

Step 1: Open the PropProfs Knowledge Base page editor

 

Step 2: Click the “Edit site CSS button” in the toolbar

 

Click the CSS Button in the toolbar

 

Step 3: Navigate to the “CSS block .computer_code, code.” Erase “code,” as highlighted in the image below, and click OK to save the changes

 

Delete Code from the CSS block

 

Supported Languages

The Code Highlighter in the ProProfs Knowledge Base Editor supports 23 programming languages. They are:

 

  1. Apache

  2. Bash

  3. C#

  4. C++

  5. CSS

  6. CoffeeScript

  7. Diff

  8. HTML

  9. XML

  10. HTTP

  11. Ini

  12. JSON

  13. Java,

  14. JavaScript

  15. Makefile

  16. Markdown

  17. Nginx

  18. Objective C

  19. PHP

  20. Perl

  21. Python

  22. Ruby

  23. SQL

 

That is all about code highlighter in ProProfs Knowledge Base.

 

 

Related Articles

 
Was this information helpful?
Powered by ProProfs Knowledge Base
add chat to your website