Inline code after latest update inserts newlines before and after the inline code.

[aphalo]

Describe the bug Inline code after latest update inserts newlines before and after the inline code.

See https://www.r4photobiology.info/2023/01/ggspectra-0-3-10/

WordPress Editing Mode Which WordPress editing mode you're using ? Advanced Editor Tools (previously TinyMCE Advanced) Should be irrelevant, as preexisting pages in the whole site were broken. I haven't edited anything since the automatic plugin update.

Frontend or Backend Issue frontend: page rendering

To Reproduce Steps to reproduce the behavior: See for example https://www.r4photobiology.info/2023/01/ggspectra-0-3-10/ and almost every other post at https://www.r4photobiology.info

Expected behavior Inline code to the displayed in line.

Screenshots If applicable, add screenshots to help explain your problem.

This should be a single paragraph with no line breaks.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6] PC
• OS: [e.g. iOS8.1] Win 10
• Browser Firefox 109.0; Microsoft Edge 109.0.1518.55 (Official build) (64-bit)
• Version Enlighter plugin 4.6.0
• WordPress 6.1.1 running Nirvana theme.

Additional context

Plugin configuration

``` { "translation-enabled": true, "enlighterjs-init": "inline", "enlighterjs-assets-js": true, "enlighterjs-assets-themes": true, "enlighterjs-assets-themes-external": true, "enlighterjs-selector-block": "pre.EnlighterJSRAW", "enlighterjs-selector-inline": "code.EnlighterJSRAW", "enlighterjs-indent": 2, "enlighterjs-ampersandcleanup": true, "enlighterjs-linehover": true, "enlighterjs-rawcodedbclick": false, "enlighterjs-textoverflow": "scroll", "enlighterjs-linenumbers": true, "enlighterjs-theme": "eclipse", "enlighterjs-retaincss": false, "enlighterjs-language": "r", "toolbar-visibility": "default", "toolbar-button-raw": true, "toolbar-button-copy": true, "toolbar-button-window": true, "toolbar-button-enlighterjs": true, "tinymce-backend": true, "tinymce-frontend": false, "tinymce-formats": true, "tinymce-autowidth": false, "tinymce-tabindentation": false, "tinymce-keyboardshortcuts": true, "tinymce-font": "sourcecodepro", "tinymce-fontsize": "0.7em", "tinymce-lineheight": "1.4em", "tinymce-color": "#000000", "tinymce-bgcolor": "#f9f9f9", "gutenberg-backend": true, "quicktag-backend": true, "quicktag-frontend": false, "quicktag-mode": "html", "shortcode-mode": "disabled", "shortcode-inline": true, "shortcode-type-generic": true, "shortcode-type-language": true, "shortcode-type-group": false, "shortcode-filter-content": true, "shortcode-filter-excerpt": true, "shortcode-filter-widget": false, "shortcode-filter-comment": false, "shortcode-filter-commentexcerpt": false, "gfm-enabled": true, "gfm-inline": true, "gfm-language": "generic", "gfm-filter-content": true, "gfm-filter-excerpt": true, "gfm-filter-widget": true, "gfm-filter-comment": true, "gfm-filter-commentexcerpt": true, "compat-enabled": true, "compat-crayon": false, "compat-codecolorer": false, "compat-type1": true, "compat-type2": false, "compat-filter-content": true, "compat-filter-excerpt": true, "compat-filter-widget": false, "compat-filter-comment": false, "compat-filter-commentexcerpt": false, "cache-custom": false, "cache-path": "", "cache-url": "", "dynamic-resource-invocation": true, "ext-infinite-scroll": false, "jetpack-gfm-code": false, "ext-ajaxcomplete": false, "bbpress-shortcode": false, "bbpress-markdown": false } Custom theme configuration /*@BASETHEME:enlighter*/ .enlighter-t-wpcustom{ border-radius: 8px; border: solid 1px #e0e0e0; background-color: #eoeoeo; } .enlighter-t-wpcustom .enlighter-btn{ border-radius: 3px; padding: 0; border: 1px solid #e0e0e0; margin: 0 0 0 8px; text-decoration: none; width: 23px; height: 23px; background-position: 0 0; background-size: contain; } .enlighter-t-wpcustom .enlighter-btn:hover{ border-color: #c9c9c9; } .enlighter-t-wpcustom .enlighter-btn:after{ content: ''; } .enlighter-t-wpcustom.enlighter-hover.enlighter-linenumbers div.enlighter>div:hover{ color: #444; background-color: #fffcd3; } .enlighter-t-wpcustom.enlighter-hover div.enlighter>div:hover{ color: #444; } .enlighter-t-wpcustom .enlighter-raw{ border-radius: 8px; padding: 0 5px 0 60px; } .enlighter-t-wpcustom div.enlighter>div{ border: solid 0 #fff; line-height: 1.35em; color: #aaa; } .enlighter-t-wpcustom div.enlighter>div:FIRST-CHILD{ border-radius: 8px 8px 0 0; } .enlighter-t-wpcustom div.enlighter>div:LAST-CHILD{ border-radius: 0 0 8px 8px; } .enlighter-t-wpcustom div.enlighter>div.enlighter-special{ } .enlighter-t-wpcustom.enlighter-linenumbers div.enlighter>div::before{ border-right: solid 1px #e0e0e0; } .enlighter-t-wpcustom.enlighter-linenumbers div.enlighter>div:FIRST-CHILD::before{ border-radius: 8px 0 0 0; } .enlighter-t-wpcustom.enlighter-linenumbers div.enlighter>div:LAST-CHILD::before{ border-radius: 0 0 0 8px; } .enlighter-t-wpcustom .enlighter-text{ color: #000; } .enlighter-t-wpcustom .enlighter-c0{ } .enlighter-t-wpcustom .enlighter-c1{ } .enlighter-t-wpcustom .enlighter-c2{ } .enlighter-t-wpcustom .enlighter-c9{ } .enlighter-t-wpcustom .enlighter-k0{ } .enlighter-t-wpcustom .enlighter-k1{ } .enlighter-t-wpcustom .enlighter-k2{ } .enlighter-t-wpcustom .enlighter-k3{ } .enlighter-t-wpcustom .enlighter-k4{ } .enlighter-t-wpcustom .enlighter-k5{ } .enlighter-t-wpcustom .enlighter-k6{ } .enlighter-t-wpcustom .enlighter-k7{ } .enlighter-t-wpcustom .enlighter-k8{ } .enlighter-t-wpcustom .enlighter-k9{ } .enlighter-t-wpcustom .enlighter-k10{ } .enlighter-t-wpcustom .enlighter-k11{ } .enlighter-t-wpcustom .enlighter-e0{ } .enlighter-t-wpcustom .enlighter-e1{ } .enlighter-t-wpcustom .enlighter-e2{ } .enlighter-t-wpcustom .enlighter-e3{ } .enlighter-t-wpcustom .enlighter-e4{ } .enlighter-t-wpcustom .enlighter-s0{ } .enlighter-t-wpcustom .enlighter-s1{ } .enlighter-t-wpcustom .enlighter-s2{ } .enlighter-t-wpcustom .enlighter-s3{ } .enlighter-t-wpcustom .enlighter-s4{ } .enlighter-t-wpcustom .enlighter-s5{ } .enlighter-t-wpcustom .enlighter-n0{ } .enlighter-t-wpcustom .enlighter-n1{ } .enlighter-t-wpcustom .enlighter-n2{ } .enlighter-t-wpcustom .enlighter-n3{ } .enlighter-t-wpcustom .enlighter-n4{ } .enlighter-t-wpcustom .enlighter-n5{ text-decoration: underline; } .enlighter-t-wpcustom .enlighter-m0{ } .enlighter-t-wpcustom .enlighter-m1{ } .enlighter-t-wpcustom .enlighter-m2{ } .enlighter-t-wpcustom .enlighter-m3{ } .enlighter-t-wpcustom .enlighter-g0{ } .enlighter-t-wpcustom .enlighter-g1{ } .enlighter-t-wpcustom .enlighter-t0{ } .enlighter-t-wpcustom .enlighter-t1{ } .enlighter-t-wpcustom .enlighter-t2{ } .enlighter-t-wpcustom .enlighter-t3{ } .enlighter-t-wpcustom .enlighter-t4{ } .enlighter-t-wpcustom .enlighter-t5{ } .enlighter-t-wpcustom .enlighter-t6{ } .enlighter-t-wpcustom .enlighter-t7{ } .enlighter-t-wpcustom .enlighter-t8{ } .enlighter-t-wpcustom .enlighter-x1{ } .enlighter-t-wpcustom .enlighter-x2{ } .enlighter-t-wpcustom .enlighter-x10{ } .enlighter-t-wpcustom .enlighter-x11{ } .enlighter-t-wpcustom .enlighter-x12{ text-decoration: underline; } .enlighter-t-wpcustom .enlighter-x13{ } .enlighter-t-wpcustom .enlighter-x14{ } .enlighter-t-wpcustom .enlighter-x15{ } .enlighter-t-wpcustom.enlighter-v-inline{ border-radius: 3px; background-color: #fafafa; } .enlighter-t-wpcustom.enlighter-v-codegroup .enlighter,.enlighter-t-enlighter.enlighter-v-codegroup .enlighter-raw{ border-top-left-radius: 0; border-top-right-radius: 0; } .enlighter-t-wpcustom.enlighter-v-codegroup .enlighter div:first-child{ border-radius: 0; } .enlighter-t-wpcustom.enlighter-v-codegroup .enlighter-codegroup-wrapper{ position: relative; } .enlighter-t-wpcustom.enlighter-v-codegroup .enlighter-codegroup-switch{ border-radius: 8px 8px 0 0; background-color: #f9f9f9; border-bottom: 1px solid #e0e0e0; padding: 5px 5px 5px 45px; } .enlighter-t-wpcustom.enlighter-v-codegroup .enlighter-codegroup-switch .enlighter-btn{ padding: 3px 10px 3px 10px; border-radius: 4px; border: 1px solid #e0e0e0; width: auto; } .enlighter-t-wpcustom.enlighter-v-codegroup .enlighter-codegroup-switch .enlighter-btn.enlighter-active{ background-color: #e5e5e5; color: #000; border-color: #c9c9c9; } .enlighter-t-wpcustom .enlighter span{ background-color: #eoeoeo; } .enlighter-t-wpcustom div.enlighter>div.enlighter-special:hover{ } .enlighter-t-wpcustom .enlighter-x16{ } ```

[aphalo]

I also check with the Twenty-Twenty-Three theme and the problem persists.

[SuperBoss9]

Have the same behaviour on the fresh installed plugin. 'this text' arose closing the paragraph \</p> or adding two paragraph tags \<p>\</p>

[AndiDittrich]

thanks for your reports! it's a side effect of a required bugfix regarding the wpautop filter and the internal "placeholder" workaround to keep the code immutable. your html code is changed by wpauto and not Enlighter :(

Generally this issue only affects the compatibility mode, inline shortcodes and markdown style inline blocks - you can easily downgrade to v4.5.0 or revert the following commit: https://github.com/EnlighterJS/Plugin.WordPress/commit/6ed5d71032d477bf5f5f25733a9b6649e04a7f0b

This commit adds a "pre" wrapper tag around the placeholders, which allows wpautop to recognize the content as pre-codeblock. And yes this causes your issues because now a "block" element is assumed by wpautop.

Technically the solution will take some time because it doesn't make sense to revert the commit which previously breaks all block codeblocks (much more needed..) within the mentioned modes. I've to "split" all filters for specific block+inline wrappers.

Gutenberg and TinyMCE should work as expected.

sry guys

[AndiDittrich]

@aphalo @SuperBoss9 can you confirm that only the mentioned editing modes are affected ?

[SuperBoss9]

@aphalo @SuperBoss9 can you confirm that only the mentioned editing modes are affected ?

I didn't manage to find other issues with the inline code. Is it possible to add something like a feature that will change this type of quotes to something like \this type of tags\? That may be a solution.

[AndiDittrich]

it much more complicated under the hood... technically the filters are extracting the codeblocks with a low wp_filter priority and restoring the content (converted to EnlighterJS codeblocks) with a high wp_filter priority. the extraction (placeholders are inserted) needs to be modified to detect inline content and wrap the placeholders selectively in code/pre tags temporarily to avoid wpautop issues.

in previous versions (without a pre wrapper) all codeblocks were assumed as inline by wpautop - therefore you didn't experienced any issues but the markup was broken in case of block content

[aphalo]

@AndiDittrich I am not sure how the editor in use matters in this, except when writing a new post or page. At the moment this bug affects a couple of hundred existing posts in my website from the last several years. The html includes the backquotes as & scapes, as I made sure my settings would stop the editor from converting backquotes into <code> </code> fences so as to let Enlighter do the highlighting. For the time being, I deactivated Enlighter and will think how to proceed. I can live with this. I am not using Guthember or blocks at all, at least not explicitly. I guess, I should downgrade to the previous version unril you have the time to correct the problem. I had not even noticed that a problem existed with blocks... Thanks, for the great plugin!

[AndiDittrich]

see https://github.com/EnlighterJS/Plugin.WordPress/issues/351 for details why the "legacy" compatibility modes have changed.

you can easily force the old (invalid) behaviour by reverting the commit mentioned above (replace one file)

[AndiDittrich]

https://github.com/EnlighterJS/Plugin.WordPress/commit/da0d8ea55420044bd34ce9b78761f396633aa3ca should fix the issue for gfm(markdown) and shortcodes - maybe someone give it a try

changing the compatibility modes takes longer

[ajtruckle]

I just upgraded to 4.6.1. Is there some easy way to identify where on my site I used inline code?Maybe with the Search field on my posts list? This way I can confirm it looks OK for you. I don't remember when I last used inline you see.

[SuperBoss9]

Just search via WP Editor search. Use symbols that are used in the declarations of the code blocks. Like apostrophes or HTML tags like pre etc.

-- Best wishes, Vladislav Kravchenko

сб, 21 янв. 2023 г. в 11:04, ajtruckle @.***>:

I just upgraded to 4.6.1. Is there some easy way to identify where on my site I used inline code?Maybe with the Search field on my posts list? This way I can confirm it looks OK for you. I don't remember when I last used inline you see.

— Reply to this email directly, view it on GitHub https://github.com/EnlighterJS/Plugin.WordPress/issues/363#issuecomment-1399204008, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMZZBLJ2ZGNTEAP6UQ2G373WTOKB7ANCNFSM6AAAAAAT7GRU6A . You are receiving this because you were mentioned.Message ID: @.***>

[SuperBoss9]

I've just checked 4.6.1 with my notes. Inline code alone works pretty good. But if I have these fancy back-quotes (I don't know how to name them properly) inside a \<pre> block - they also englighted. From my point of view this is a wrong behaviour. Nothing inside \<pre> should be changed:

[ajtruckle]

I think I have inline code on here in two places and it seems OK:

https://www.publictalksoftware.co.uk/2018/05/s-89-slips-highlight-when-study-point-not-assigned/

[AndiDittrich]

@SuperBoss9

in case your not using an Enlighter codeblock this is the expected behaviour of using markdown fenced codeblocks or shortcodes.

[SuperBoss9]

@SuperBoss9

in case your not using an Enlighter codeblock this is the expected behaviour of using markdown fenced codeblocks or shortcodes.

Then it works :)