Syntax Highlighter for CKEditor

In this tutorial we will cover how to provide a syntax highlighter functionality for editors in your Drupal site.

Install/Configure the syntax highlighter for CKEditor

First enable the module by going to the modules tab in the administrator menu.

The module is called “CKEditor SyntaxHighlighter” and can be located within the “User Interface” section

Once installed and enabled in your site, the module can be configured at admin/config/content/ckeditor_syntaxhighlighter or under the Syntax highlighter for CKEditor entry on the Configuration tab.

There are different options to configure like,

  • Library paths, by default a concrete version of the CKEditor plugin and the syntax highlighter library is offered in the infrastructure, but you can use your own version if needed (not recommended). In order to use locally managed plugin/library you need to change the path where they are located.
  • Theme used
  • Inject libraries options, you can select in which pages you want to add the libraries or as a black list in which ones you don’t want to add them
  • Default expressions, by using this you can customize the behavior of the syntax highlighter library (like hiding the line number on the code highlighted)

 

Enable the syntax Highlighter

 

In order to start using this CKEditor plugin you need firstly enable it and put the icon on your CKEditor toolbar. All this must be done in the CKEditor configuration (/admin/config/content/ckeditor).

Select the profile in which you want to enabled this feature and then go to Editor Appareance.

Enable the module by checking the checkbox in the plugins section and add the button to the CKEditor toolbar by moving the icon shown in the next image from the All buttons to the Used buttons toolbar.

 

Use the syntax hightlighter

 

Please note that the proper Text format must be choosen when creating/editing content to have the new added button.

During the creation of the content, click on the new button to open the plugin window

 

Select the Language to highlight and insert the code there.

Save the content and you will have automatically the code highlighted when viewing the content

You are here