data-diff first line bug

[fry69]

Regarding this bug: https://github.com/ember-learn/guides-source/issues/1956

I traced this problem to this line: https://github.com/empress/ember-showdown-prism/blob/main/addon/initializers/showdown-extension.js#L89

The first line of the codeblock variable is already filled with rendered elements e.g. for the filename. Inserting the diff operator later into this first line will fail and produce bad HTML, see example below, the <span> for diff-operator + before the <span> for the filename:

URL: https://guides.emberjs.com/release/tutorial/part-2/service-injection/#toc_the-router-service

<section aria-labelledby="toc_the-router-service">
<p>To fix our problem, we would need to do the same. Ember exposes this internal state through the <em><a href="[https://api.emberjs.com/ember/release/classes/RouterService](view-source:https://api.emberjs.com/ember/release/classes/RouterService)">router service</a></em>, which we can <em><a href="[../../../services/#toc_accessing-services](view-source:https://guides.emberjs.com/release/services/#toc_accessing-services)">inject</a></em> into our component:</p>
<span class="diff-insertion"><span class="diff-operator">+</span><div class="filename js"><div class="ribbon"></div><span>app/components/share-button.js</span><pre class="language-js line-numbers"><code class="js language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> service <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@ember/service'</span><span class="token punctuation">;</span></span>
<span class="token keyword">import</span> Component <span class="token keyword">from</span> <span class="token string">'@glimmer/component'</span><span class="token punctuation">;</span>