Show Code in Drupal Content with the CodeSnippet Module

| Drupal
Show Code in Drupal Content with the CodeSnippet Module

Out of the box, Drupal displays code snippets that don't get highlighted.

In this blog post, you will learn how to show code snippets in Drupal content highlighted with the CKEditor CodeSnippet module and CKEditor CodeSnippet plugin.

  • If you use the <pre> and <code> HTML5 tags in out of the box Drupal, your HTML code snippet will look as in the image below:

HTML code snippet - no highlighting

  • And here is how a PHP code snippet would look like:

PHP code snippet - no highlighting

Use the CKEditor CodeSnippet contributed module to show code nicely highlighted. This module enables the CKEditor CodeSnippet plug-in responsible for highlighting your code snippets and styling them.

By the end of this tutorial, you will have learned how to install and configure this plugin. You will also take a look at its basic usage.

For the purpose of this tutorial, you will be working on a freshly installed Drupal 8 site.

Step #1. Installation

The CodeSnippet module works with CKEditor and its plugin CodeSnippet. You have CKEditor in your Drupal out of the box. The plugin, however, has to be downloaded and installed.

Download the CodeSnippet CKEditor plugin

  • In the root of your Drupal installation, create the /libraries/ folder:

The /libraries/ folder

  • Unzip the plugin file you just downloaded. You will see the /codesnippet/ folder:

Extracted folder /codesnippet/

  • Upload the /codesnippet/ folder to the /libraries/:

The /libraries/codesnippet/ sub-folder

  • In your command line terminal, go to the folder with your Drupal installation and type the following command:
composer require drupal/codesnippet
  • Your command line prompt with this command will look similar to the image below:

composer require codesnippet command

  • For a few moments, you will be seeing loading, installation, and cleanup related messages:

Composer activity messages

  • In your Drupal dashboard, go to Extend > OTHER and install the CKEditor CodeSnippet:

Install the CodeSnippet Drupal module

  • After a few seconds, you should see the message, confirming that your CKEditor CodeSnippet has been successfully enabled:

CKEditor CodeSnippet enabled

Good job! Next, you need to get the Insert Code Snippet button available to you. 

Step #2. Add the Insert Code Snippet Button to Your CKEditor Toolbar

  • Go to Configuration > Text formats and editors > Basic HTML
  • Click Configure:

Click Configure

  • Locate the CodeSnippet button on the Active buttons toolbar.

The CodeSnippet button

  • Drag and drop it to the Active toolbar. Inside the Tools group, that is next to the source button, will be a good place to drop it onto:

CodeSnippet button on the Active toolbar

Notice, that once you dropped the CodeSnippet button to the Active toolbar, your CKEditor plugin interface changes. Two new settings appear:

Two new interface elements 

  1. the highlight.js Style select box with various CSS styles for you to choose from
  2. the Supported Languages checkboxes with different programming languages you may wish to highlight.

For now, you can leave both settings as they are.

  • Select a CSS style and code languages to your preference
  • Click Save Configuration
  • Repeat the same step for the Full HTML text format.

Step #3. Using the Insert Code Snippet button

Next step is to see the CodeSnippet plugin at work. For demonstration purposes, you will add an HTML, PHP, CSS, JavaScript and SQL snippets to Drupal articles.

  • Go to Content > Add Content > Article. Add a title to the article
  • Click the Insert Code Snippet button:

The Insert code snippet button

  • You will see the Code snippet content area. Paste your HTML code snippet into the Code content box:

Code snippet content area

  • In the Language box, click on the <not set>. Select the Xml language from the dropdown list of languages:

Enter your HTML code and select the xml language

  • Click OK
  • Click Save and publish.

Now check your new page at the site front end. You will see your HTML code nicely highlighted:

The final result

Play with code snippets with other languages to get the feel how they pan out.

Conclusion

Drupal core is limited when it comes to demonstrating code snippets in its articles and pages. By default, such code snippets will get displayed without highlighting.

Use the CodeSnippet contrib module and the CKEditor CodeSnippet plugin to get your code snippets nicely styled and highlighted. Installation is easy. Configuration is minimal. 


About the author

Born from Ukrainian mother and Russian father, Alex migrated to the United Kingdom in 1999. He is a self-taught Microsoft Certified Professional. He enjoys learning content management systems and helping web site developers make the most of them.