starred/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2026-01-11 21:10:29 +01:00
Code Issues 273 Packages Projects Releases 10 Wiki Activity

CSS: Markdown code blocks are rendered with wrong padding #10039

New Issue
Closed
opened 2025-12-29 21:26:04 +01:00 by adam · 4 comments
adam commented 2025-12-29 21:26:04 +01:00
Owner
Copy Link

Originally created by @jsenecal on GitHub (Aug 1, 2024).

Originally assigned to: @arthanson on GitHub.

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:
image

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:
image

Originally created by @jsenecal on GitHub (Aug 1, 2024). Originally assigned to: @arthanson on GitHub. ### 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: ![image](https://github.com/user-attachments/assets/584a9676-46e2-4adf-a459-faf0484e2e1d) 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](https://preview.tabler.io/markdown.html) using chrome inspect, albeit less evident in some of the examples due to their font choices: ![image](https://github.com/user-attachments/assets/da3b51bb-efe9-4a2a-b5fc-073c964569be)
adam added the type: bugstatus: acceptedseverity: low labels 2025-12-29 21:26:05 +01:00
adam closed this issue 2025-12-29 21:26:05 +01:00
adam commented 2025-12-29 21:26:05 +01:00
Author
Owner
Copy Link

@jsenecal commented on GitHub (Aug 1, 2024):

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 commented on GitHub (Aug 1, 2024): I'm not sure NetBox devs will want to fix what seem to be an upstream bug but I figured I would document it.
adam commented 2025-12-29 21:26:05 +01:00
Author
Owner
Copy Link

@jsenecal commented on GitHub (Aug 1, 2024):

I also created an upstream issue https://github.com/tabler/tabler/issues/1930

@jsenecal commented on GitHub (Aug 1, 2024): I also created an upstream issue https://github.com/tabler/tabler/issues/1930
adam commented 2025-12-29 21:26:06 +01:00
Author
Owner
Copy Link

@jeremystretch commented on GitHub (Aug 2, 2024):

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>.

@jeremystretch commented on GitHub (Aug 2, 2024): 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>`.
adam commented 2025-12-29 21:26:06 +01:00
Author
Owner
Copy Link

@jsenecal commented on GitHub (Aug 2, 2024):

Adding:

pre code {
  padding: unset;
}

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

@jsenecal commented on GitHub (Aug 2, 2024): Adding: ```css pre code { padding: unset; } ``` in netbox/project-static/styles/overrides/_tabler.scss should do it.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
beta
breaking change
complexity: high
complexity: low
complexity: medium
needs milestone
netbox
pending closure
plugin candidate
pull-request
Mirrored from GitHub Pull Request
 severity: high
severity: low
severity: medium
status: accepted
status: backlog
status: blocked
status: duplicate
status: needs owner
status: needs triage
status: revisions needed
status: under review
topic: GraphQL
topic: Internationalization
topic: OpenAPI
topic: UI/UX
topic: cabling
topic: event rules
topic: htmx navigation
topic: industrialization
topic: migrations
topic: plugins
topic: scripts
topic: templating
topic: testing
type: bug
type: deprecation
type: documentation
type: feature
type: housekeeping
type: translation
No Label severity: low status: accepted type: bug
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
adam
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/netbox#10039
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?