Skip to main content

Problem

The Drupal CKEditor CodeSnippet module supports a limited set of languages.

These define the language options that appear in the editor codesnippet dialog. If you want to add to the options in the editor, you need to add them to the Drupal module configuration.

Solution

For D8, this is easy. Since these settings are stored in a configuration file, all you need to do is edit the configuration file and then import the new config.

Notes:

  • This procedure may not add highlight support for the given languages. All it does is change the options available in the editor codesnippet dialog.
    Even if you specify the language in the editor dialog: if your version of Highlight.js doesn't include that language, then it will make a best-guess among the languages that it does include.
  • To change the languages supported by your Highlight.js library, see Adding Custom Highlight.js Language Pack to Drupal CKEditor CodeSnippet Module.
  • This procedure assumes that you have already installed the CodeSnippet module, installed the corresponding CKEditor codesnippet plugin, and added it to the editor for your text format.

Edit codesnippet.settings.yml

After you've completed the initial setup for the CodeSnippet module and exported your settings, you should see a file named codesnippet.settings.yml in your standard config sync directory.

Edit this file, replacing the languages section with whatever you need.

Here's an example based on the languages in the custom language pack that is used on this site. Note: this example represents only the languages section from the file. Leave the other sections in the file as they are.

languages:
  apache: 'Apache Config'
  applescript: Applescript
  bash: 'Bash / Sh / Zsh'
  css: CSS
  diff: Diff
  handlebars: Handlebars
  http: Http
  ini: 'Ini / TOML'
  javascript: Javascript
  json: Json
  markdown: Markdown
  nginx: Nginx
  perl: Perl
  php: Php
  plaintext: Plaintext
  python: Python
  ruby: Ruby
  scss: SCSS
  shell: 'Shell / Console'
  sql: Sql
  twig: 'Twig / Craftcms'
  xml: 'XML / HTML / RSS / Plist'
  yaml: Yaml

Import the new settings

$ drush cim

Configure Drupal text formats

For each of the relevant Drupal text formats, you should see your new language options under the CodeSnippet Plugin Settings. Select the languages as needed and save.

As usual, you'll want to export the new config.

Now, when you add a codesnippet, you should see new language options in the dialog.

Add new comment