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. 


Supported Languages

  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?
© 2005 - 2024 ProProfs
add chat to your website