Drupal Code and Method of Development

CodeSnippet:

Select the CKEditor module to avail different kinds of coding making your process of attaining the correct usage of the tools that seem to solve intended tasks.

Installation:

This module requires the core CKEditor module and the following CodeSnippet plugin can extract from CKEditor.com doing same.

1. Download your CodeSnippet plugin from http://ckeditor.com/addon/codesnippet URL.

2. Place your discovered plugin folder in the root library folder (/libraries/codesnippet).

3. Enable CodeSnippet while Development in Drupal admin.

4. Configure your WYSIWYG toolbar to include different buttons.

Basic Usage:

After completing your installation with above processes shown above, go to a filter format you want to configure (it is compliant to use CKEditor).

CodeSnippet:

Drag a CodeSnippet icon into an active toolbar, and use the config form that appears below with imported syntax highlighting style and supporting language options. By default, all checking benefits are things put in use. Uncheck ones you do not need, it is optional. This only controls options available in the dialogue window of CKEditor inserting your associated code snippet.

Note: Your filter format must support the use of pre and code tags also under allowed tags if you use anything apart from complete HTML. You need to configure an HTML filter (if Limit Allows Tags actively) to allow class attributes.

Like So:

<code class=""> <pre class="">

Supporting Multiple Stylesheets:

While your module allows each filter format to configure in a stylesheet to highlight, the HLJS plugin does not support the feature provided. See issues for further details, including a workaround to initiate in a unique style completes the process.

https://github.com/isagalaev/highlight.js/issues/862

If you use multiple filter formats on one page, note your highest weighted filter format settings add to your page last and therefore a style overrides the other HLJS style selected in other formats. For now, it is best configuring in one format for highlighting, or, using same style library for every format.

Drupal Coding Processes

CodeSnippet Supported Languages:

To add new options to your supportive language option in an admin form, you can use as a form to alter the hook within your own custom module when adding.

use Drupal\Core\Form\FormStateInterface;

/**

* Implements hook_form_FORM_ID_alter().

* Add extra languages for CodeSnippet

* @param $form

* @param FormStateInterface $form_state

* @param $form_id

*/

function MYMODULE_form_filter_format_edit_form_alter(&$form, FormStateInterface $form_state, $form_id) {

if (isset($form['editor']['settings']['subform']['plugins']['codesnippet'])) {

$form['editor']['settings']['subform']['plugins']['codesnippet']['highlight_languages']['#options']['cpp'] = 'C++';

$form['editor']['settings']['subform']['plugins']['codesnippet']['highlight_languages']['#options']['d'] = 'D';

$form['editor']['settings']['subform']['plugins']['codesnippet']['highlight_languages']['#options']['rust'] = 'Rust';

asort($form['editor']['settings']['subform']['plugins']['codesnippet']['highlight_languages']['#options']);

}

}

This would add C++, D, and Rust to list of languages to check off, which then has provisions available in the dialogue of CKEditor CodeSnippet. An important thing to note is that a key of the array item needs to match expected code class for the code snippet HighlightJS when properly colouring. If you are unsure of your class, name, refer to HighlightJS live demo page and inspect the codeblock of what you require, and check class on your code HTML element.

Additionally, you need to add new languages to HighlightJS by customizing a build. You can customize a build at https://highlightjs.org/download/

1. Select all languages you need supportively through syntax highlighting and download your image file.

2. Overwrite /libraries/codesnippet/lib/highlight/highlight.pack.js with this new file.

3. Clear Drupal caches.

Note: That code has syntax highlighting and does not look completely correct (in WYSIWYG), but typically is as viewed on the frontend.

Out of the box, an included version of highlightjs comes in these languages (as defined in config/install/codesnippet.settings.yml):

Code snippet in Drupal

Languages:

apache: 'Apache'

bash: 'Bash'

coffeescript: 'CoffeeScript'

css: 'CSS'

dart: 'Dart'

dockerfile: 'Dockerfile'

dust: 'Dust'

gherkin: 'Gherkin'

go: 'Go'

haml: 'HAML'

handlebars: 'Handlebars'

ini: 'Ini'

java: 'Java'

javascript: 'JavaScript'

json: 'JSON'

less: 'Less'

makefile: 'Makefile'

markdown: 'Markdown'

nginx: 'Nginx'

php: 'PHP'

perl: 'Perl'

powershell: 'Powershell'

puppet: 'Puppet'

python: 'Python'

ruby: 'Ruby'

scss: 'SCSS'

sql: 'SQL'

twig: 'Twig'

typescript: 'TypeScript'

yaml: 'Yaml'

xml: 'XML'

If you want to highlight HTML code snippets, you need to use XML choices on with the coding.