Issues with the HTML generated when using the diff- syntax

[KuluGary]

Hi! I am having some issues when implementing a code block with the diff-tsx syntax. It looks like it's not generating the correct HTML, while using it with only tsx does. I will leave two examples of the same block code.

This is the HTML output when using the diff-tsx syntax (extracted from devtools):

<pre class="language-diff-tsx"><code class="language-diff-tsx">import { initialize, mswLoader } from "msw-storybook-addon";

import type { Preview } from "@storybook/nextjs";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { initialize, mswLoader } from "msw-storybook-addon";

import "@platform/ui/theme/styles.css";
import "../src/styles/fonts.css";

<span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> initialize();
</span></span>const queryClient = new QueryClient({
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> defaultOptions: {
</span><span class="token prefix unchanged"> </span><span class="token line">   queries: {
</span><span class="token prefix unchanged"> </span><span class="token line">     retry: false,
</span><span class="token prefix unchanged"> </span><span class="token line">   },
</span><span class="token prefix unchanged"> </span><span class="token line"> },
</span></span>});

const preview: Preview = {
<span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> decorators: [
</span><span class="token prefix unchanged"> </span><span class="token line">   (Story) =&gt; (
</span><span class="token prefix unchanged"> </span><span class="token line">     &lt;QueryClientProvider client={queryClient}&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">       &lt;Story /&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">     &lt;/QueryClientProvider&gt;
</span><span class="token prefix unchanged"> </span><span class="token line">   ),
</span><span class="token prefix unchanged"> </span><span class="token line"> ],
</span><span class="token prefix unchanged"> </span><span class="token line"> parameters: {
</span><span class="token prefix unchanged"> </span><span class="token line">   controls: {
</span><span class="token prefix unchanged"> </span><span class="token line">     matchers: {
</span><span class="token prefix unchanged"> </span><span class="token line">       color: /(background|color)$/i,
</span><span class="token prefix unchanged"> </span><span class="token line">       date: /Date$/i,
</span><span class="token prefix unchanged"> </span><span class="token line">     },
</span><span class="token prefix unchanged"> </span><span class="token line">   },
</span><span class="token prefix unchanged"> </span><span class="token line">   nextjs: {
</span><span class="token prefix unchanged"> </span><span class="token line">     appDirectory: true,
</span><span class="token prefix unchanged"> </span><span class="token line">     navigation: {
</span><span class="token prefix unchanged"> </span><span class="token line">       pathname: "/",
</span><span class="token prefix unchanged"> </span><span class="token line">     },
</span><span class="token prefix unchanged"> </span><span class="token line">   },
</span><span class="token prefix unchanged"> </span><span class="token line"> },
</span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line">  loaders: [mswLoader],
</span></span>};

export default preview;</code></pre>

And this is the HTML output when using the tsx syntax.

<pre class="language-tsx"><code class="language-tsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> initialize<span class="token punctuation">,</span> mswLoader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"msw-storybook-addon"</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> Preview <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@storybook/nextjs"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> QueryClient<span class="token punctuation">,</span> QueryClientProvider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@tanstack/react-query"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> initialize<span class="token punctuation">,</span> mswLoader <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"msw-storybook-addon"</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> <span class="token string">"@platform/ui/theme/styles.css"</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">"../src/styles/fonts.css"</span><span class="token punctuation">;</span>

<span class="token operator">+</span> <span class="token function">initialize</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> queryClient <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">QueryClient</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  defaultOptions<span class="token operator">:</span> <span class="token punctuation">{</span>
    queries<span class="token operator">:</span> <span class="token punctuation">{</span>
      retry<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> preview<span class="token operator">:</span> Preview <span class="token operator">=</span> <span class="token punctuation">{</span>
  decorators<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">(</span>Story<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">QueryClientProvider</span></span> <span class="token attr-name">client</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>queryClient<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Story</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">QueryClientProvider</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  parameters<span class="token operator">:</span> <span class="token punctuation">{</span>
    controls<span class="token operator">:</span> <span class="token punctuation">{</span>
      matchers<span class="token operator">:</span> <span class="token punctuation">{</span>
        color<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">(background|color)$</span><span class="token regex-delimiter">/</span><span class="token regex-flags">i</span></span><span class="token punctuation">,</span>
        date<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">Date$</span><span class="token regex-delimiter">/</span><span class="token regex-flags">i</span></span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    nextjs<span class="token operator">:</span> <span class="token punctuation">{</span>
      appDirectory<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      navigation<span class="token operator">:</span> <span class="token punctuation">{</span>
        pathname<span class="token operator">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token operator">+</span>  loaders<span class="token operator">:</span> <span class="token punctuation">[</span>mswLoader<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> preview<span class="token punctuation">;</span></code></pre>

I'm using "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2".

If there's anything else I can help out with to reproduce the issue let me know!

[tucker-m]

I can't really tell from just reading the HTML -- is it the &lt and &gt that's the problem in the first one? If so, try adding | safe in your template wherever you're printing out the content, so that it's like {{ content | safe }} or {{ page.content | safe }} or something like that. Although I'm not sure why that would only be a problem with the diff-tsx highlighting, and not the regular tsx highlighting.