CSS: Markdown code blocks are rendered with wrong padding

[jsenecal]

Deployment Type

Self-hosted

NetBox Version

v4.0.8

Python Version

3.10

Steps to Reproduce

1. Set any comment field to include the following markdown:

First line
\```
first code block line
second code block line
third code block line
\```

(Remove the backslashes '\')
2. Click on preview, or save the form.
3. Notice that fist code block line is not aligned with the following lines when rendered

Expected Behavior

All the code block lines should be aligned

Observed Behavior

The first line is padded properly but the remaining lines are more to the left, as if there was no padding:

The Tabler CSS for markdown code blocks is unaltered in NetBox with regards to padding (padding: 2px 4px;) and the issue is also visible when live editing their demo using chrome inspect, albeit less evident in some of the examples due to their font choices:

[jsenecal]

I'm not sure NetBox devs will want to fix what seem to be an upstream bug but I figured I would document it.

[jsenecal]

I also created an upstream issue tabler/tabler#1930

[jeremystretch]

The fenced_code Markdown extension renders code blocks with a<code> tag inside a <pre> tag. Looks like the first-row indentation results from the padding on the <code> element.

We could either remove the <code> element, or add a CSS rule to remove any padding from <code> elements within a <pre>.

[jsenecal]

Adding:

pre code {
  padding: unset;
}

in netbox/project-static/styles/overrides/_tabler.scss should do it.