Enlighter not picking pre tags in compatibility

Hi @marksei,

i didn’t test the compatibility mode with crayon yet – therefore i’m not sure if the compat mode will work (it currently only matches/transforms code tags with a <pre><code class="lang"> structure as see here https://github.com/EnlighterJS/Plugin.WordPress/blob/master/class/CompatibilityModeFilter.php#L32)

best regards, Andi

i’ve just checked it: the compatibility mode won’t work with crayon… it uses a different element structure <pre class="lang:xhtml decode:true">

you could run a simple regex to convert it into an Enlighter codeblock

i’ve also opened a issue/feature request regarding this topic: https://github.com/EnlighterJS/Plugin.WordPress/issues/136

a working code-snippet can be found on GitHub: https://github.com/EnlighterJS/Plugin.WordPress/issues/136#issuecomment-449749856

i didn’t test other crayon code options yet – i believe there are some special cases where the code won’t work (e.g. language attribute is not the first one)

Hello Andi, thank you for your prompt response and solution, I guessed that the problem lied in Crayon syntax, however I can’t seem to be able to make Enlighter recognize pre tags (without Crayon syntax) anyway. I tried manually removing the class from pre tag. This is probably due to the fact that Crayon creates pre tags without code tags and the regex used in your code only recognizes that pattern.
I do believe this is a major feature that could potentially draw in much of the Crayon’s userbase. Not saying that Crayon is a bad plugin, but it hasn’t been maintained for quite some time now and Gutenberg doesn’t really play well with it. I also believe this feature should be implemented within the plugin rather than using a hook and should be enabled by default (a block created by Crayon is unmistakably a code block that needs highlighting).

i don’t understand your current issue: on the one hand you talk about crayon and on the other about “pre tags without crayon syntax”

the code snippet i’ve created on GitHub converts crayon code-tags into Enlighter-code-tags including the language setting. it will be added to v4 of the Enlighter Plugin in the future (as tagged on GitHub).

you can also highlight any kind of container containing text content with Enlighter – e.g matching pre tags without the need of the EnlighterJSRAW class – just change the css selectors in the settings: Enlighter -> Options -> Advandced Options -> CSS Selector

advanced docs can be found on enlighterjs.org

Sorry, I missed the v4 tag on Github. What I expected (as with Crayon) was that any pre tag would be recognized by Enlighter as code (without the EnlighterJSRaw class). When thinking about that default behavior, it maybe is a bit excessive to highlight any pre tag without further labeling. So, if I were to remove the EnlighterJSRaw in the CSS selector field, Enlighter would highlight any pre tag, have I got it right?

Nevertheless, you have already solved my current issue, what I was suggesting is to implement a more Crayon-ish behavior, which may or may not be a good thing.

For the time being I can continue to use the snippet you provided and create any subsequent pre tag using the visual editor. This effectively is a nice way to transition from Crayon, thus my issue is solved. Thank you for your help.