Support » Plugin: Enlighter - Customizable Syntax Highlighter » Enlighter not picking pre tags in compatibility

  • Resolved marksei


    Hello, firstly let me thank you for developing this awesome plugin.
    I’m experiencing an unexpected behavior with Enlighter while transitioning away from Crayon. The behavior I’m used to with Crayon is that every pre or code tag is automatically recognized and its language guessed without me specifying it.
    I’m trying to reproduce the same behavior with Enlighter, but up until now I’ve been unsuccessful.
    With a bit of search I discovered this function is implemented under the name of “Compatibility mode”. So I enabled the compatibility mode on the_content to no avail. I tried flushing caches, reloading without caches but I can’t seem to be able to isolate the problem.
    I can confirm Enlighter is loaded and works fine using the EnlighterJSRAW class and the data attribute.
    Although I can get Enlighter to work with the custom class and data attribute, replacing each and every pre/code tag within my posts is not a solution for me.

    Thank you for your help.

    P.s. of course Crayon has been disabled.

    • This topic was modified 6 months, 3 weeks ago by  marksei. Reason: P.s

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Andi Dittrich


    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

    best regards, Andi

    Plugin Author Andi Dittrich


    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:

    Plugin Author Andi Dittrich


    a working code-snippet can be found on GitHub:

    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).

    Plugin Author Andi Dittrich


    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

    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.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Enlighter not picking pre tags in compatibility’ is closed to new replies.