Thumbnail

Text filters for syntax highlighting

Thumbnail

Campbell Tilley

|

If you're looking to extend your WYSIWYG experience with text filters that will provide markup for your code, there are contributed modules out there that can do just this. Although, sometimes what you're given isn't enough and a patch or custom module is required.

Out of the box, Drupal provides a few basic text filters to help with your text formatting, like the various HTML filters. There are also contributed modules which add additional filters to extend your WYSIWYG's format ability. As there are usually multiple modules that will provide similar functionality, there is a bit of trial and error work involved in finding the most suitable module for your needs.

Geshi Filter

Lil Engine needed a filter module that would provide a code markup for our blog posts. The first module that we found fit for purpose and began using was GeSHi Filter. The functionality of this module is great as it has dozens of coding languages to choose from and various ways to wrap your code. We installed this module, along with the GeSHi Library, only to find that it had integration problems with CKEditor. It was also quite difficult to install the javascript library with Composer.

CodeSnippet

The second module we installed was CKEditor CodeSnippet. This module functions a little differently to GeSHi. GeSHi filter is controlled by adding <code></code> wrappers around your code, whereas Code snippet adds a plugin to your CKEditor where you can simply click, paste your code and save.

codesnippet example

This module was perfect for Lil Engine as a Syntax Highlighter. The only downfall was that it didn't allow us to easily mark up inline code blocks.

CodeTag

If you need inline code blocks then CKEditor CodeTag is another CKEditor plugin that will provide you with the right functionality. We didn't use this, as we had our heart set on using backticks.

Custom back tick filter

With our syntax highlighter in place, we still wanted a filter that would allow us to wrap terminal commands or single line code in backticks. Since Slack and other tools support backticks, it is almost muscle memory when sharing a command.

example of slacks code filter

After searching high and low for a contributed module, we decided to create our own. Essentially we created a module that replaces BACKTICKsnippetBACKTICK with <code>snippet</code>, using PHP's regular expression (regex) function - preg_match_all. Like me, if you aren't that familiar with your regular expressions, the Regex101 website will assist you and details of the correct syntax in PHP can be found here.

Steps to create this module

If you would like to create your own backtick filter module to use on your site, follow the below steps.

.info.yml file

  1. Create your backtick_filter directory in your custom modules directory.
  2. Create one file within this directory: backtick_filter.info.yml (.module file is no longer a requirement in Drupal 8, this is an optional file).
  3. In the backtick_filter.info.yml file add the following code:
name: Lil Engine Backtick Filter
type: module
description: Replaces backticks with code wrappers.
package: Lil Engine
core: 8.x
version: 1.0
hidden: false

Filter Plugin

  1. Inside your backtick_filter directory, create an src, Plugin and Filter directory and arrange the directories so that the file system is now backtick_filter > src > Plugin > Filter
  2. Inside the Filter directory create one file: FilterBacktick.php. This is where all of the logic for the filter will sit.
  3. Open up your FilterBacktick.php file and enter the following code:
<?php

/**
 * @file
 * Contains Drupal\lilengine_backtick_filter\Plugin\Filter.
 */

namespace Drupal\lilengine_backtick_filter\Plugin\Filter;
use Drupal\filter\FilterProcessResult;
use Drupal\filter\Plugin\FilterBase;

/**
 * Provides a filter to replace  with code wrappers.
 *
 * @Filter(
 *  id = "filter_backtick",
 *  module = "lilengine_backtick_filter",
 *  title = @Translation("Lil Engine Backtick Filter"),
 *  type = Drupal\filter\Plugin\FilterInterface::TYPE_TRANSFORM_REVERSIBLE,
 *  cache = FALSE,
 *  weight = 0
 * )
 */
class FilterBacktick extends FilterBase {

  /**
   * {@inheritdoc}
   */
  public function process($text, $langcode) {
    $new_text = $text;
    $matches = [];
    preg_match_all ("|([^]*)|" , $text , $matches);
    foreach ($matches[0] as $key => $matched) {
      $new_text = str_replace($matched, '<code>' . $matches[1][$key] . '</code>', $new_text, $count = 1);

    }
    return new FilterProcessResult($new_text);
  }
}

In the above code, on line 32 - preg_match_all... is where the regex has been added in.

Once you have completed the above head back over to your site and install the new module then activate the filter under Text formats and editors.

CSS

Once your backticks have been replaced with <code> tags, you only need to style it up. Slack messages look something like this:
 

code {
	font-family: Consolas,monaco,"Ubuntu Mono",courier,monospace!important;
	font-size: .75rem;
	line-height: .75rem;
	white-space: normal;
	color: #c25;
	padding: 2px 3px 1px;
	-webkit-font-variant-ligatures: none;
	font-variant-ligatures: none;
	tab-size: 4;
}

Now you should have a fully functioning back tick filter module, enjoy!

The Lil Engine Backtick Filter module can also be found on GitHub - backtick-filter-module

Add new comment

The content of this field is kept private and will not be shown publicly.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.

Comments

  • Allowed HTML tags: <em> <strong> <cite> <blockquote cite> <ul type> <ol start type> <li> <dl> <dt> <dd> <p>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
  • Use [gist:#####] where ##### is your gist number to embed the gist
    You may also include a specific file within a multi-file gist with [gist:####:my_file].

Spread the word