When attempting to display a single line of code within a code block, the layout appears too close to the line numbers (this issue only occurs in Firefox): https://i.sstatic.net/WXZp7.png
The HTML code responsible for this display is automatically generated by Hugo and appears as follows (without the color highlighting classes):
<table>
<tbody>
<tr>
<td>
<pre>
<code>
<span>1
</span>
</code>
</pre>
</td>
<td>
<pre>
<code>
<span>actual code goes here
</span>
</code>
</pre>
</td>
</tr>
</tbody>
</table>
I have observed that if I remove the line break like so:
<span>1</span>
The code displays correctly. However, since the HTML is automatically generated by Hugo, I am unable to make changes to it. Therefore, my only option would be to modify the CSS. I have tried using the white-spacing property, which corrects the behavior for single-line blocks but causes all lines to render on the same row for multi-line blocks.
Is there a specific CSS property in Firefox that could assist with resolving this issue?
The structure of a multi-line example that renders properly is as follows:
<tr>
<td>
<pre>
<code>
<span>1
</span><span>2
</span>
</code>
</pre>
</td>
<td>
<pre>
<code>
<span>actual code goes here</span>
</code>
</pre>
</td>
</tr>