Custom CSS class for an Enlighter block

[koszeggy]

All regular blocks have an Additional CSS Class setting, which would be very useful for Enlighter blocks as well. Alternatively (or additionally), the selected language could be added as a CSS class to the container div.

I use the "naked" WPCustom theme and apply my own style by CSS. But now I am unable tell whether a kw2 keyword class belongs to a C# or XML code, for example.

[AndiDittrich]

Hi @koszeggy ,

adding custom css classes to EnlighterJS blocks doesn't make sense, because the markup from Gutenberg is not used to display the sourcecode. It's just a "container" which holds the code.

The custom classes are just a workaround for special cases and should not be used regular - the better way is to add custom formats/blocks to the editor.

If you take a look into EnlighterJS3 you will see that the token system has completely changed compared to the previous version. Now the token definitions rely on an abstract definition and should be interoperable between different languages.

Adding language specific classes was projected for v3.0 but it caused some problems with multi-code-windows and the container layout.

I would recommend you to create derived themes for each use case and add them to the global theme list (or replace it..)

[koszeggy]

Thank you for your quick response.

adding custom css classes to EnlighterJS blocks doesn't make sense, because the markup from Gutenberg is not used to display the sourcecode

To be frank I don't really understand this reasoning. Allowing custom classes for any kind of blocks does always make sense. And to me it would definitely make sense for Enlighter, too. :)

Here is the concrete example (open The Profiler class dropdown box). I would use a bit different colors for the XML keywords and I could do it really easily if the usual Additional CSS Class was available for Enlighter blocks.

Of course I could create a new theme with hardcoded colors but as I have written now I don't use any of the themes (the WPCustom "theme" has no .css file in the views/themes folder either). My styles are now coming from my global light.css file and I would like to avoid hardcoding them into an Enlighter theme, which would prevent to change styles globally.

Now I should embed the code block in a parent container where I can set a CSS class. Or I could switch to CodeMirror, which allows defining a CSS class but that produces a much verbose result than Enlighter (with a lot of JS code), so I still prefer Enlighter.

Thank you anyway and keep up the good work.

[AndiDittrich]

To be frank I don't really understand this reasoning. Allowing custom classes for any kind of blocks does always make sense. And to me it would definitely make sense for Enlighter, too. :)

it does make sense in case the "block" is used to display the content directly - but in case of EnlighterJS the output of the block is not used...it will be thrown away it is just a placeholder

it is not a problem to add an additional css field to the Gutenberg block...but this won't be recognized by EnlighterJS - it requires some modifications of the WordPress plugin as well as the core library EnlighterJS.

And especially in TinyMCE or "Classic" other users might get serious trouble because sometimes the "class" attributes (editor styles) are also applied to the codeblock - in case the css classnames are just copied they destroy the highlighting (override enlighterjs theme with TinyMCE styles)..

Of course I could create a new theme with hardcoded colors but as I have written now I don't use any of the themes (the WPCustom "theme" has no .css file in the views/themes folder either). My styles are now coming from my global light.css file and I would like to avoid hardcoding them into an Enlighter theme, which would prevent to change styles globally.

Just take a look into the EnlighterJS repository (v2 legacy branch) - all themes are available there. The "theme" folder of the WordPress plugin contains all available themes of the ThemeCustomizer - the WPCustom theme will use one of these files (base theme).

You can use the enlighter_themes filter to override the full list and add two themes name My Site Regular and My Site XML. Remember that the theme names are just css classes which are added to the outer container of the EnlighterJS markup - you can apply any css rule you want. Your themes can life in any css file you want - just exclude the EnlighterJS css resources and you will get the full control.

For such use cases it is the prefered method to use custom themes (it is faster during edtiting and much more reliable).

Now I should embed the code block in a parent container where I can set a CSS class.

again..this won't work... the pre container which contains the code is set to invisible by EnlighterJS, the text content will be extracted and EnlighterJS generates a new markup (see enlighterjs.org)

[AndiDittrich]

i've also added the following options to EnlighterJS v3.1.0 to allow users to use the classes of the origin element:

var options = {
    retainCssClasses: true,
    cssClasses: "ultraspecialclass"
};

[AndiDittrich]

[koszeggy]

Vielen Dank ;)

[AndiDittrich]

the related option is disabled by default and available under Enlighter -> Options -> Advanced -> EnlighterJS -> Options -> Retain CSS Classes

[AndiDittrich]

i've just release the first beta version of Enlighter v4 including the retain css option

https://github.com/EnlighterJS/Plugin.WordPress/releases/tag/v4.0.0-BETA1

---

i appreciate your feedback