Drupal 8 Customize CKEditor Format Options

Question

Drupal 8.4.x

I am trying to add custom formats to the ckeditor dropdown.

Having the Geshi Filter module installed it would be nice to have the tags associated with the different languages available as a format option for users.

Following a reply here: https://drupal.stackexchange.com/a/244331/79805, I have success adding the "div" tag, but seem unable to add anything else like a "css" tag or even a "span" tag.

Is it possible to add custom tags to the format list?

This is the function running right now from user @rémy:

function ckeditor_add_format_tags_editor_js_settings_alter(array &$settings) {

    foreach (array_keys($settings['editor']['formats']) as $text_format_id) {
        if ($settings['editor']['formats'][$text_format_id]['editor'] === 'ckeditor') {
            $settings['editor']['formats'][$text_format_id]['editorSettings']['format_tags'] .= ";div";
        }
    }

}

Answer 1

CKEditor's format drop down is intended for block-level elements only. So e.g. for headlines, divs, blockquotes, paragraphs and so on.

Inline-elements as spans, links (in CKEditor inline elements by default, even HTML5 specs state they can wrap block elements), i, b, strong, em and so on will have to use the styles drop down.

The css tag is neither block nor inline element, and you'd have to define it as custom block element first.

You can let CKEditor know about your block-level elements by extending the dtd setting, but this exceeds the scope of the Drupal Answers group, even Drupal 8 is using CKEditor by default. Please refer to the CKEditor docs for more information.

For your very special use case, I do have a suggestion:

In one of our projects, we have been using the GeSHi filter module in conjunction with the codesnippet module and added a text filter module codesnippet_geshifilter that "translates" codesnippet markup to GeSHi filter compatible markup.

The intention was to have JavaScript based syntax highlighting while editing the source code, but render pages with server-side generated GeSHi highlighting.

It works well for code blocks. There are some flaws with inline code however. These require tweaking the available CKEditor styles drop down.