Account for Code blocks containing rich text in Gutenberg 9.2+

[westonruter]

In Gutenberg 9.2, Code blocks now allow rich text editing (via WordPress/gutenberg#24689). This means you can have a Code block with formatting:

<!-- wp:code -->
<pre class="wp-block-code"><code>if ( value === 'something' ) {
    <strong><span style="color:#a30000" class="has-inline-color">// Do something here!</span></strong>
}</code></pre>
<!-- /wp:code -->

In the editor this appears as:

On the frontend with this plugin active, however, it appears as:

We're not currently expecting markup to be inside of the highlighted text. This means the markup is getting escaped, and the autodetection is also failing. Here it's detecting that the language is xml as opposed to js.

I'm not sure how best to support highlighting Code blocks which already contain rich formatting. One option would be just to bail if the content contains any child elements. That would at least prevent the block from breaking, but we wouldn't get any highlighting.

In order to support highlighting text that also has tags, perhaps we could strip the tags out, do the highlighting, and then re-add the the tags. This could be challenging to correctly re-add the tags in the right places.

[westonruter]

Something just came to mind related to this. The current mechanism for highlighting lines is not ideal since it's easy for the highlighted lines to shift around when adding content before the highlighted lines. Well, it turns out that Gutenberg has highlighting built-in now! And since rich text is allowed in a Code block, this can be done by just selecting the text you want to highlight, not even an entire line:

This is way better than having to enter the line numbers manually (moreover as the line numbers currently aren't even shown in the editor):

Only thing is that it would be nice if the highlight could extend to the entire line and not just the text selected.