Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Something wrong with & in Gutenberg blocks #98

Open
kedixa opened this issue Jan 8, 2019 · 26 comments

Comments

@kedixa
Copy link

commented Jan 8, 2019

I'm using WordPress 5.0 and SyntaxHighlighter Evolved 3.5.0.
It seem wrong when there are '&' and '<' characters in the code. For example, if I write "a && b < c" in the code block, it becomes "a &amp;&amp; b < c;" in my post; if I write "&amp;" in the code block, it becomes "&" in my post.

@Viper007Bond

This comment has been minimized.

Copy link
Owner

commented Jan 8, 2019

This is an issue with the core code block too. I'm waiting on some feedback before trying to address it.

See WordPress/gutenberg#13218

@kedixa

This comment has been minimized.

Copy link
Author

commented Jan 9, 2019

OK, Thank you very much!

@Warlib1975

This comment has been minimized.

Copy link

commented Jan 19, 2019

Yes, the same problem. And also after the last WP update the problem with quotes in the С++ code: all quotes shows as "&quot".

image

@Warlib1975

This comment has been minimized.

Copy link

commented Jan 26, 2019

Hello, colleagues,

do you have some decision on how to workaround the problem with " and &lt; and &gt. All codes in my blog now impossible to read. It's look like a garbage. :-( Here is the example of the JSON file visualization:

image

@reekes

This comment has been minimized.

Copy link

commented Jan 26, 2019

Same here, my code is unreadable after syntax highlighting. If this isn't fixed soon, I'll have to find an alternative.

PS - I'm on WordPress 5.0.3 and I am not using Gutenberg

@Viper007Bond

This comment has been minimized.

Copy link
Owner

commented Jan 27, 2019

I've been in the hospital lately but plan on looking into this soon.

@Viper007Bond

This comment has been minimized.

Copy link
Owner

commented Jan 28, 2019

I'm still able to reproduce this issue in the core/code Gutenberg block with WordPress 5.0.3 and both the Gutenberg plugin disabled (core code) and enabled (newer code).

I'm really not quite sure what to do. :(

@Warlib1975

This comment has been minimized.

Copy link

commented Jan 28, 2019

I'm still able to reproduce this issue in the core/code Gutenberg block with WordPress 5.0.3 and both the Gutenberg plugin disabled (core code) and enabled (newer code).

I try another syntax highlighting plugin: https://www.wordpress.org/plugins/enlighter/ The problem with it with Gutenberg is similar, but the situation is a little bit better. At least after saving it shows the code for readers ok. But when I return for editing page, the block with code shows as broken and impossible to edit its. :-( I created the issue in the Gutenberg Github with information, that for now there is no any working code highlighting plugin working properly with Gutenberg, so, it seems, the problem with Gutenberg.

@Warlib1975

This comment has been minimized.

Copy link

commented Jan 28, 2019

I've been in the hospital lately but plan on looking into this soon.

Get well!!! You wrote the beautiful plugin, very useful.

@Warlib1975

This comment has been minimized.

Copy link

commented Jan 28, 2019

Same here, my code is unreadable after syntax highlighting. If this isn't fixed soon, I'll have to find an alternative.

Unfortunately, it seems that there is no any working syntax highlighter plugin working with Gutenberg. Only in classic mode they work ok.

@iamntz

This comment has been minimized.

Copy link

commented Feb 23, 2019

Hey guys, I've encountered this issue as well and I figured out that I can fix it on existing codebase, using a filter:

add_filter('syntaxhighlighter_htmlresult', function($html) {
	return preg_replace('/&amp;([^;]+;)/', '&$1', $html);
});

Basically the pattern is the same: the wrongly escaped string is transformed from &foo; to &amp;foo;.

This may lead to some weird effects in some edgecases, but for my requirements this works just fine.

@David-Else

This comment has been minimized.

Copy link

commented Mar 10, 2019

@iamntz I don't know Wordpress or PHP coding, but I am a JS developer and can work things out. Could you explain how I can add your filter and make things work? Cheers!

@iamntz

This comment has been minimized.

Copy link

commented Mar 10, 2019

@David-Else

This comment has been minimized.

Copy link

commented Mar 10, 2019

@iamntz THANKS!!! It worked :)

If people find any problems with the filter or it gets fixed in core/original plugin, let's add a comment to this thread.

@David-Else

This comment has been minimized.

Copy link

commented Mar 10, 2019

@iamntz I spoke too soon!!! all the &quot; came back when I came back to the post later on after closing the browser... now I dare not update the page again. How is this nonsense happening?!

What was working 20 mins ago in the Gutenberg editor and on the rendered page:

sudo sh -c 'echo -e "\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo'

degenerated into:
sudo sh -c 'echo -e &amp;quot;[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc&amp;quot; &amp;gt; /etc/yum.repos.d/vscode.repo'

I am hitting Update every-time as the broken Gutenberg editor in WP 5.1 does not preview WordPress/gutenberg#12617

I added the snippet to the child theme functions.php, my code snippets are in Custom HTML blocks and look like:

[bash]hostnamectl set-hostname yourhostname[/bash]

[rant]I really do hate WordPress, if I had the time I would learn Drupal, it is just not a professional product, wish I knew better when I started out.[/rant]

@iamntz

This comment has been minimized.

Copy link

commented Mar 10, 2019

@David-Else: I don't think i understand what you're doing: you're using shortcodes to insert code samples? Why not using syntax block?

As far as I can tell, the issue do exists, but is only if you're using shortcodes :)

@iamntz

This comment has been minimized.

Copy link

commented Mar 10, 2019

A small update: same regex applied to shortcodes will lead to the correct result on frontend, but backend will still look scrambled:

add_filter('syntaxhighlighter_precode', function ($code, $atts, $tag) {
	return preg_replace('/&amp;([^;]+;)/', '&$1', $code);
}, 10, 3);
@iamntz

This comment has been minimized.

Copy link

commented Mar 10, 2019

I think I fixed 😬

// functions.php
function ntz_fix_syntax_highlighter($content)
{
	return preg_replace('/&amp;([^;]+;)/', '&$1', $content);
}

add_filter('content_save_pre', 'ntz_fix_syntax_highlighter');
add_filter('syntaxhighlighter_htmlresult', 'ntz_fix_syntax_highlighter');
add_filter('syntaxhighlighter_precode', 'ntz_fix_syntax_highlighter');

What this will do is to replace the doubled encoded strings on:

  1. post save
  2. Code from Gutenberg blocks
  3. Shortcodes (Gutenberg or TinyMCE)

The last two filters are needed only for legacy (i.e. if you don't want to go and update all existing posts).

@David-Else

This comment has been minimized.

Copy link

commented Mar 10, 2019

@iamntz Great work, thanks for the help!! I have changed to use the [code][/code] block instead of the custom html block as you recommended, but inside that I need to use [bash][/bash] or I get no syntax highlighting.

If I use the SyntaxHighlighterCode block I get no good results with or without the shortcode.

Thing seem to work now, so just to confirm, if I use [code] blocks and shortcodes (i seem to need them for it to work) I should use?:

function ntz_fix_syntax_highlighter($content)
{
	return preg_replace('/&amp;([^;]+;)/', '&$1', $content);
}

add_filter('content_save_pre', 'ntz_fix_syntax_highlighter');

(no backward compatibility needed)

@iamntz

This comment has been minimized.

Copy link

commented Mar 11, 2019

You need to use either shortcodes OR syntax blocks, not both.

As for highlight: you did selected the language, right? https://img.iamntz.com/2019-03-11_05h22_25.mp4

@David-Else

This comment has been minimized.

Copy link

commented Mar 11, 2019

@iamntz Thanks, I have always used shortcodes, did not see the language option!

@David-Else

This comment has been minimized.

Copy link

commented Mar 12, 2019

@iamntz Thanks! With your ntz_fix_syntax_highlighter function and using the right block things now work great.

@heyquentin

This comment has been minimized.

Copy link

commented Aug 16, 2019

hey @iamntz
I implemented your function to fix the issue with & on my site but it looks like it only works for one &. If I have code that has two & side by side (command1 && command2) it displays
command1 && amp; command2

Got any suggestions?

@iamntz

This comment has been minimized.

Copy link

commented Aug 16, 2019

I think you could just str_replace for that:

function ntz_fix_syntax_highlighter($content)
{
	$content = str_replace('&amp;&amp;', '&&', $content);
	$content = preg_replace('/&amp;([^;]+;)/', '&$1', $content);

	return $content;
}
@heyquentin

This comment has been minimized.

Copy link

commented Aug 16, 2019

@iamntz It looks like everything is working now. Thanks a ton for your help!

@CodinMaster

This comment has been minimized.

Copy link

commented Sep 8, 2019

@iamntz Thanks. Works Fine !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
8 participants
You can’t perform that action at this time.