Syntax Highlighter module does program code list syntax highlighting. If your Drupal 7 or Drupal 8 website has tutorial or would like to discuss related to programming, then you may use this module to highlighting your code block. Many renowned websites are using Syntax Highlighter for displaying code. In this tutorial, you will learn how to configure and use the Syntax Highlighter module in Drupal 7 / Drupal 8 website.
Requirements:
- Drupal Installed website (Drupal 7 / Drupal 8)
Extra Modules:
- Syntax Highlighter module
Extra Library Modules:
- Library files for Syntax Highlighter
Steps to install Syntax Highlighter module in Drupal 7 / Drupal 8 website:
Follow the following steps to install the Syntax Highlighter module in Drupal 7 / Drupal 8 website:
Step 1: Download the Syntax Highlighter module for your Drupal 7 / Drupal 8 website from the address http://drupal.org/project/syntaxhighlighter.
Step 2: Log in to your Drupal 8 / Drupal 7 website admin control panel using your website user name and password. Now, install the Syntax Highlighter module to your Drupal 7 / Drupal 8 website.
Step 3: Now, we need to install the library files for Syntax Highlighter module. Download the library files from http://alexgorbatchev.com/SyntaxHighlighter/download/ and extract them into sites/all/libraries folder.
Step 4: Go to your Drupal 7 or Drupal 8 website Modules control panel and enable Syntax Highlighter from there.
Step 5: We have to add the module to a text format. For example, we add it to the Filtered HTML. Go to Administration >> Configuration >> Content authoring >> Text formats and choose the configure of Filtered HTML format.
Step 6: Click the Syntax highlighter checkbox under Enabled filters. When you ticked click on Save configuration option.
Step 7: After the above steps, we now have to adjust the Filter processing order. Just drag the Syntax highlighter before the Convert line breaks into HTML filter.
Step 8: And the last configuration we have to do is to enable some languages that we would like to highlighting. Just go to Administration >> Configuration >> Content authoring >> Syntax highlighter and put tick which languages you want enabled from the long lists and after choosing click on Save configuration button.
Step 9: Now, you are ready to use this module to highlight your codes on your Drupal 7 or Drupal 8 website. Just use the syntax {syntaxhighlighter brush: anycode} {/syntaxhighlighter}
Here, anycode = the enabled language you choose from step 8.
Example:
We would like to add a C++ code for one of our content page. So, we enable cpp from Step 8 and we would have to use {syntaxhighlighter brush: cpp} {/syntaxhighlighter}
We create a content type, for example an article type of content type and create an article like the following using syntaxhighlighter tag:
Once we have done, we save the article and we see like the following:
And that’s all. We see that the code is highlighted and easily understand. Following the above steps, we could easily install, configure and use Syntax Highlighter for highlighting all the syntax of our Drupal 7 / Drupal 8 website. Hopefully, you are able to do this. However, if you have any problems or issues to configure and use, please mention it to the comment section.
