Feature: add different styling per language

[dpalic]

right now it is not possible to define different CSS styles per programming language.

Example:

bash

should have black background and light font colors to look like a console

javascript

should look like bootstrap4

1. quick solution

as a first quick solutions it would be already helpful to add the language somehow to the div-container as a CSS class. For the above examples e.g.

• enlighter-code-bash
• enlighter-code-javascript

So it would be possible to modfiy the CSS styles easily by the needs

2. more fancy solution

For less experienced users it would be great to have a Theme definition per language

• a default theme

and customizing

| language | theme | | bash, console | dracula | | javascript,css,html, | bootstrap4 |

As said variant 1. would already solve my problem

[AndiDittrich]

there is a technical issue regarding the codegroup feature: themes need to be set on the outer container but a "language class" has to be applied to one of the inner code wrappers.

i've no idea how to solve this in a reliable way. using a custom theme for each language may work in your case but also breaks codegroups an other upcoming views.

[dpalic]

@AndiDittrich not getting your problem, let me nail it down to html

this is how it is now:

<div class="enlighter-default enlighter-v-standard enlighter-t-wpcustom enlighter-hover enlighter-linenumbers enlighter-overflow-scroll ">
   <div class="enlighter-toolbar-top enlighter-toolbar">
      <div class="enlighter-btn enlighter-btn-raw" title="Plain text"></div>
      <div class="enlighter-btn enlighter-btn-copy" title="Copy to clipboard"></div>
      <div class="enlighter-btn enlighter-btn-window" title="Open code in new window"></div>
      <div class="enlighter-btn enlighter-btn-website" title="EnlighterJS 3 Syntax Highlighter"></div>
   </div>
   <div class="enlighter" style="">
      <div class="">
         <div><span class="enlighter-text">apt update;apt dist-upgrade -y</span></div>
      </div>
   </div>
   <div class="enlighter-raw">apt update;apt dist-upgrade -y</div>
   <div class="enlighter-toolbar-bottom enlighter-toolbar"></div>
</div>

this is how it would already solve my issue#1 by adding

enlighter-code-bash as CSS class or enlighter-code-html ...

<div class="enlighter-code-bash enlighter-default enlighter-v-standard enlighter-t-wpcustom enlighter-hover enlighter-linenumbers enlighter-overflow-scroll ">

Another finding (can create different issue)

Also it is an issue to render HTML tags if they are not needed (disabled) in the settings, since it makes the HTML bigger, core web vitals are triggered without a need. In my case only the copy button was activated by settings. E.g. "Open code in new window" was disabled

[AndiDittrich]

this is not working for the codegroup view

[dpalic]

Not clear if we talk past each other

you cannot add a marker css class to the class="" ?

if I understand your code well, you are using

https://github.com/EnlighterJS/Plugin.WordPress/blob/b23c422fa9b80e621de7ebfc73439a181d51137f/modules/customizer/ThemeCustomizer.php#L86

in here you have the language type (e.g. javascript, bash, ...) and based on this you could add a marker-CSS class, or do I missunderstand a concept wrong here?

[AndiDittrich]

EnlighterJS is a standalone project (see https://github.com/EnlighterJS) - the WordPress plugin is just one "ready to go" implementation..

if you take a deeper dive into the code, you will notice that there are other views (html DOM structures) like inline or codegroup. your requested feature won't work as expected for codegroups.

it's possible to add the language as css class to the inner div code wrapper but this doesn't give you the ability to change the outer theme styles.

[dpalic]

it's possible to add the language as css class to the inner div code wrapper but this doesn't give you the ability to change the outer theme styles.

can you show me the possible result in terms of my above example how the html would look like?

[AndiDittrich]

try out the inline and codegroup feature and look for the elements with "enlighter" class. the markup has also changed in the upcoming release (named "enlighter-code").

[dpalic]

I cannot follow you here? Can you please let me know where to try out the inline + codegroup feature?

What release date do you have planned for the next release?

[AndiDittrich]

see https://github.com/EnlighterJS/documentation/blob/master/editing/TinyMCE.md

[AndiDittrich]

i've added the feature in https://github.com/EnlighterJS/EnlighterJS/commit/5cb6263cf3f16baa7ee20f67b3e6f5cdffba372f solution regarding the codegroup view: the outer css class is dynamically changed depending on the current tab selection

[dpalic]

any plans for a new release?

[AndiDittrich]

no ETA yet - if you need the feature asap, just replace the enlighterjs.min.js file with the one of the master branch (dist/) and click on "save changes" to regenerate the cache