Markup code for syntax highlighting escaped in the frontend

Please provide the following infos so we can investigate and try to resolve any issue:

* Which library (Prism or Highlight) are you using
* Are you using Gutenberg block or Classic Editor
* Simplest possible example of a code snippet that is not escaped

Let me know if any questions about this, thank you.

– prism
– classic editor

I created a test page:
https://adinserter.pro/test/hello-world

Top prismatic code block uses source code of the prisamtic block from the original page.

It seems the post source code contains HTML markup for syntax highlighting, for example:

<pre><code class=" language-markup"><span class="token tag"><span class="token punctuation"><</span>script <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code>

The bottom prismatic block is a new one – no issues.

To summarize:
– works fine with version 2.7
– why there is HTML markup for syntax highlighting in the post source codes?
– how to fix it?

Thanks, but I am not sure what this means:

“Top prismatic code block uses source code of the prisamtic block from the original page.”

Can you explain further about this?

Also for the code snippet, I tried adding to the Prism block and it was escaped exactly as shown above, no errors or issues. In order to help, I need a code snippet that demonstrates that escaping/highlighting is not working.

Also, what does this mean:

“why there is HTML markup for syntax highlighting in the post source codes?”

I am unable to decipher the intended meaning here, please help me to understand. Thank you

• This reply was modified 3 years, 4 months ago by Jeff Starr.

I copied HTML source code of the prismatic block from the site where the issue is present.

You have everything on the test page I created.

The top block is obviously wrong – it should display the code as in the block below.

No you misunderstand, in order to help, I need to know the actual code snippet that you are adding that is not escaped correctly. The raw code that you enter in the Prism block. Or if it is multiple snippets, doesn’t matter; still need the actual code snippets so I can add them myself. Looking at the highlighted code on the front-end is not useful in this case.

You have the code to be highlighted on the page – please read again the description of the issue:

<script type="text/javascript">
 amzn_assoc_search_bar = "true";
 amzn_assoc_search_bar_position = "top";
 amzn_assoc_ad_mode = "search";
 amzn_assoc_ad_type = "smart";
 amzn_assoc_marketplace = "amazon";
 amzn_assoc_region = "US";
 amzn_assoc_title = "Search Results from Amazon";
 </script>
 <script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US"></script>

I am not adding it. It was added years ago.

If I add it now it works. I would like that the codes I added years ago to be displayed properly.

Yeah the code is escaped fine in the current version (2.9) of the plugin. I’m not sure why older/existing code snippets are not displayed correctly. I use the plugin on numerous sites with lots of existing code snippets and everything displays fine with the latest version of Prismatic. If you find any code snippets that are not displaying correctly in the current version of the plugin, you can resolve the issue by replacing the code. Not ideal, but it’s the only recommended solution at this point.

But with version 2.7 prismatic blocks are displayed fine.

All prismatic blocks (post source code) are a mess now.
Each token is wrapped with HTML code:

<span class="token operator">=</span>

Why were posts modified?

“Why were posts modified?”

Nothing was modified except for the way that the plugin escapes code. If you look at the development/changelog for version 2.8, you will find a note that explains that code escaping method was changed. This was to improve the security of the plugin.

“All prismatic blocks (post source code) are a mess now. Each token is wrapped with HTML code”

That’s how it’s always been. Both Prism and Highlight libraries add markup to enable the code highlighting. It’s how they’ve always done it. There is no way to syntax highlight code without adding extra markup.

As mentioned, most code blocks continue to display fine in the latest version of Prismatic. If any code blocks display incorrectly, they can be replaced to display normally.

ok, but if I create a block now the plugin creates this code:

<pre><code class="language-markup"><script type="text/javascript">
 amzn_assoc_search_bar = "true";
 amzn_assoc_search_bar_position = "top";
 amzn_assoc_ad_mode = "search";
 amzn_assoc_ad_type = "smart";
 amzn_assoc_marketplace = "amazon";
 amzn_assoc_region = "US";
 amzn_assoc_title = "Search Results from Amazon";
 </script>
 <script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US"></script></code></pre>

No token has any markup code (it is done client-side) – properly highlighted.

Old prismatic blocks I created in the past now look like this:

<pre><code class=" language-markup"><span class="token tag"><span class="token punctuation"><</span>script <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code><code class=" language-javascript">
  amzn_assoc_search_bar <span class="token operator">=</span> <span class="token string">"true"</span><span class="token punctuation">;</span>
  amzn_assoc_search_bar_position <span class="token operator">=</span> <span class="token string">"top"</span><span class="token punctuation">;</span>
  amzn_assoc_ad_mode <span class="token operator">=</span> <span class="token string">"search"</span><span class="token punctuation">;</span>
  amzn_assoc_ad_type <span class="token operator">=</span> <span class="token string">"smart"</span><span class="token punctuation">;</span>
  amzn_assoc_marketplace <span class="token operator">=</span> <span class="token string">"amazon"</span><span class="token punctuation">;</span>
  amzn_assoc_region <span class="token operator">=</span> <span class="token string">"US"</span><span class="token punctuation">;</span>
  amzn_assoc_title <span class="token operator">=</span> <span class="token string">"Search Results from Amazon"</span><span class="token punctuation">;
</span></code><code class=" language-markup"><span class="token tag"><span class="token punctuation"></</span>script<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>script <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace<span class="token punctuation">=</span>US<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>script<span class="token punctuation">></span></span> 
</code></pre>

This displays the following (wrong) code:

<span class="token tag"><span class="token punctuation"><</span>script <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  amzn_assoc_search_bar <span class="token operator">=</span> <span class="token string">"true"</span><span class="token punctuation">;</span>
  amzn_assoc_search_bar_position <span class="token operator">=</span> <span class="token string">"top"</span><span class="token punctuation">;</span>
  amzn_assoc_ad_mode <span class="token operator">=</span> <span class="token string">"search"</span><span class="token punctuation">;</span>
  amzn_assoc_ad_type <span class="token operator">=</span> <span class="token string">"smart"</span><span class="token punctuation">;</span>
  amzn_assoc_marketplace <span class="token operator">=</span> <span class="token string">"amazon"</span><span class="token punctuation">;</span>
  amzn_assoc_region <span class="token operator">=</span> <span class="token string">"US"</span><span class="token punctuation">;</span>
  amzn_assoc_title <span class="token operator">=</span> <span class="token string">"Search Results from Amazon"</span><span class="token punctuation">;
</span><span class="token tag"><span class="token punctuation"></</span>script<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>script <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace<span class="token punctuation">=</span>US<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>script<span class="token punctuation">></span></span>

You can see it on the test page
https://adinserter.pro/test/hello-world

My question is: what happened with the old prismatic blocks and why?

Cleaning each prismatic block is the last thing I would like to do.

I understand it may be an inconvenience, but it’s the only way forward at this point. If Prismatic is not suitable for your needs, there are other free syntax highlight plugins that may be useful for you.

“what happened with the old prismatic blocks and why?”

The Prismatic block itself has not changed for many versions of the plugin. In version 2.7 there was an obscure vulnerability reported, where unescaped code could be exploited by a privileged user with sufficient knowledge and ill-intent. That vulnerability was resolved in version 2.8 by changing the way that code is highlighted on the front-end. Before version 2.8, the plugin provided an option whether or not to enable code escaping on the front-end. Now in 2.8 and beyond, all front-end code is escaped, there is no option to disable it. Again this is for security reasons and cannot be changed.

I fixed the issue with short PHP code to clean all prismatic blocks.

Thanks for the help.

Great, glad you got it sorted.