If you find "Diff Highlight" that uses Prism complicated, this is a much easier alternative...

Open the index.html to see it in action

---

Code with "Default Prism Diff Highlight"

<pre class="language-diff-javascript line-numbers" tabindex="0"><code class="diff-highlight language-diff-javascript"><span class="token coord">@@ -4,6 +4,5 @@</span>
<span class="token deleted-sign deleted language-javascript"><span class="token prefix deleted">-</span>    <span class="token keyword">let</span> foo <span class="token operator">=</span> bar<span class="token punctuation">.</span><span class="token function">baz</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token prefix deleted">-</span>    foo <span class="token operator">=</span> foo <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
</span><span class="token inserted-sign inserted language-javascript"><span class="token prefix inserted">+</span>    <span class="token keyword">const</span> foo <span class="token operator">=</span> bar<span class="token punctuation">.</span><span class="token function">baz</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
</span><span class="token unchanged language-javascript"><span class="token prefix unchanged"> </span>    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token string">foo: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span>foo<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">\`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span></span></code></pre>

With line numbers (Add class="line-numbers")

Without line numbers (Remove class="line-numbers")

---

Code with "Diff Highlight Pro"

<pre data-line-red="2,3" data-line-green="4" data-line-yellow="5" class="line-numbers">
<code class="language-javascript">
    @@ -4,6 +4,5 @@
        let foo = bar.baz([1, 2, 3]);
        foo = foo + 1;
        const foo = bar.baz([1, 2, 3]) + 1;
            console.log(`foo: ${foo}`);
</code>
</pre>

With line numbers (Add class="line-numbers")

Without line numbers (Remove class="line-numbers")

---

Mode of Use

Add:

<link rel="stylesheet" href="./css/diff-highlight-pro.css">
<script src="./js/diff-highlight-pro.js"></script>

data-line-red="" for red lines

data-line-green="" for green lines

data-line-yellow="" for yellow lines

Single line --> 4

Two lines --> 4,8

Range --> 4-6

Mixed --> 4,6-7

Example