New lines on code blocks get stripped when using rehype-prism

New lines sometimes get stripped from the @mapbox/rehype-prism output when highlighting a code block.

I’m using the following Webpack loader:

{
  test: /\.mdx$/,
  include: path.resolve(__dirname, 'posts'),
  loader: [
    'babel-loader',
    {
      loader: '@mdx-js/loader',
      options: { hastPlugins: [[rehypePrism, { ignoreMissing: true }]] }
    }
  ]
}

The following .mdx file:

\`\`\`dockerfile
# Add main script
COPY start.sh /home/start.sh
COPY build-log.xml /home/playpen/

# GitLab CI doesn't have access to /home
RUN chmod -R 700 /home/
\`\`\`

And here’s the result:

React source (produced by @mdx-js/loader): https://paste.ubuntu.com/p/C3cyx5ZYjV/

Which React renders as:

<pre><code class="language-dockerfile"><span class="token comment"># Add main script</span><span class="token keyword">COPY</span> start.sh /home/start.sh
<span class="token keyword">COPY</span> build<span class="token punctuation">-</span>log.xml /home/playpen/

<span class="token comment"># GitLab CI doesn't have access to /home</span><span class="token keyword">RUN</span> chmod <span class="token punctuation">-</span>R 700 /home/
</code></pre>

As you can see, there should be a line break between the first .token .comment (# Add main script) and the following .token .keyword (COPY).

One of the reasons why this could be happening is the @mdx-js/loader output is an array of react components, so newlines produced by rehype plugins might not be preserved. I haven’t looked to much into it, so I might be wrong.

I also didn’t know whether to report this on the rehype-prism repo or here, but I couldn’t reproduce it with a barebones remark setup.

[davidtheclark]

Adding the class to the code tag is what is suggested by the Prism docs, which reference the HTML spec. I do see that if you inspect the Prism or MDN websites, both pre and code have the language class — which I assume is because when Prism executes at runtime it ends up messing with that. I’d be open to a PR adding the language class to both of the elements.

[hugmanrique]

Thank you for the quick fix! 😀