westonruter / syntax-highlighting-code-block

Extending the WordPress Code block with syntax highlighting rendered on the server, thus having faster frontend performance and being AMP-compatible.
https://wordpress.org/plugins/syntax-highlighting-code-block/
GNU General Public License v2.0
118 stars 11 forks source link

Preserve styled markup in Code #698

Open westonruter opened 1 year ago

westonruter commented 1 year ago

Fixes #205

As it stands right Current Code block I'm testing with:

<!-- wp:code {"highlightedLines":"4-18","showLineNumbers":true} -->
<pre class="wp-block-code"><code>&lt;br&gt;
&amp;amp;
&lt;script&gt;
if ( true &amp;&amp; "foo" &lt;= 'bar' &amp;&amp; 'baz' &gt;= "quux" ) 
{} else if ( 
  "<strong>bolded</strong>" &amp;&amp; 
  "<em>italicized</em>" &amp;&amp; 
  "<a href="https://example.com/">linked</a>" &amp;&amp; 
  "<strong><em><a href="https://example.com">all</a></em></strong>" ) 
{} else if ( 
  "bolded spanning <strong>tokens" == 123</strong> 
) {} else if ( 
  "italicized spanning <em>tokens" == null</em> 
) {} else if ( 
  "link spanning <a href="https://example.com">tokens" == true</a> 
) {} else {
  // &#91;gallery]
}
&lt;/script&gt;
&#91;test]
&#91;embed]https://twitter.com/WordPress/status/1631756836666785795&#91;/embed]

https:&#47;&#47;twitter.com/WordPress/status/1631756836666785795

&#91;sic]</code></pre>
<!-- /wp:code -->

It's currently rendered as:

Without plugin Editor Frontend
image image image

Notice that the shortcodes are no longer being rendered, which is a fix. But what is still broken is the handling of stylized text inside the Code block. It is is getting corrupted by highlight.php.

This PR seeks to address this by adding the formatting back in after the code has been highlighted.