I have this code which was supposed to highlight some code wrapped in ``` (like you wrap snippets on stack overflow):
const highlightedHTML = highlight(codeString);
<pre {...props} className="" dangerouslySetInnerHTML={{ __html: highlightedHTML }} />;
However, the HTML it generates has extra space between the lines.
See the generated element here: https://stackblitz.com/edit/web-platform-2msddmqs?file=index.html
Don't pay attention to styles and classes in the sandbox they aren't even defined in CSS.
Why am I getting these extra spaces between lines can someone explain?
And how can I amend above that code so that I don't run into that problem?
highlight is a function from library sugar-high. And this Pre is part of using this where you just say that this component will be used when you want to generate code blocks.
The HTML contains line breaks which are being displayed due to white-space: pre on the pre element. You need to either remove the line breaks or not use white-space: pre.