Line Number doesn't render all the way

[kenny-chua]

Has anyone seen this behavior?

What I have is:

\`\`\` json title="OpenAPI Specification" linenums="1"
{
    "openapi": "3.0.3",
    "info": {
        "title": "Simplified generation API",
        "description": "From extension starter kit. Minimal spec for commonly used features in",
        "contact": {
            "name": "KC",
            "email": "[email protected]"
        },
        "version": "1.0.0"
    },
.
.
.
\`\`\`

There doesn't seem to be a line limit. For example if my code block was 1000 lines it stops number at 950, or if I had 500 lines, it stops at 480... it's inconsistent, but only happens with code blocks with many lines. It's fine for a codeblock with say 20 lines. I am wondering if there was a max line limit before it starts behaving this way. (Apologies for the , I was trying to escape the backticks.

[kamilkrzyskow]

Hello @kenny-chua,
I've tested it using a minimal example linenums.zip with the 1MB dummy dataset and the linenums work up until the end at 20k lines, but the code block breaks around 10k lines.

Given your comment that the line nums disappear almost at random, perhaps it's some sort of internal "processed token" limitation of the HTML formatter used by the Highlight extension, or maybe a combination of more extensions being enabled. I don't have any more leads at the moment, so I can only recommend you to prepare a minimal reproduction of the issue using the guide below, as in, provide the minimal configuration needed to showcase the issue:

• https://squidfunk.github.io/mkdocs-material/guides/creating-a-reproduction/#creating-a-reproduction

EDIT:
Aside from that you can use 4 ticks as a wrapper to showcase code blocks with 3 ticks code blocks.
````
```py
code
```
````

```py
code
```

[kenny-chua]

Thank you so much. I will take a look at the guide and work on it and update it here. Thanks again!!

[kenny-chua]

Hi @kamilkrzyskow, I am actually unable to reproduce this problem with minimal settings. I found that issue that triggered it is my css stylesheet. But all I have in my style sheet is this. I wonder what the issue is? But since I can't reproduce, I'll mark as answered. Thanks again!!

pre, code {
    white-space: pre-wrap; /* CSS property to make text wrap */
    word-break: break-word; /* Ensures words break properly */
    overflow-wrap: break-word; /* Breaks long words if necessary */
}

:root > * {
  --md-code-bg-color: #353437;
}

 article ul ul {
  list-style-type:  square !important;
}

article ul ul ul {
  list-style-type:  circle !important;
}

th, td {
  border: 0.05rem solid var(--md-typeset-table-color);
  border-spacing: 0;
  border-bottom: none;
  border-left: none;
  border-top: none;
}

.md-typeset__table {
  line-height: 1.5rem;
}

.md-typeset__table table:not([class]) {
  font-size: .74rem;
  border-right: none;
}

.md-typeset__table table:not([class]) td,
.md-typeset__table table:not([class]) th {
  padding: 9px;
}

[kamilkrzyskow]

Aha, this CSS wraps the text when it's too long:

pre, code {
    white-space: pre-wrap; /* CSS property to make text wrap */
    word-break: break-word; /* Ensures words break properly */
    overflow-wrap: break-word; /* Breaks long words if necessary */
}

and the line numbers are static, generated in HTML, what happens is that you increase the amount of lines in the code block, while not adjusting the line numbers, so in the end they cut off at random points, because different files add more lines than the other.

I don't think you can fix it with pure CSS 🤔 The only idea I have currently would be to use JavaScript to fetch the calculated height of the newly wrapped line and then override the corresponding span with the fetched height, so that they're aligned. However, this could lead to this "weird" effect where the gaps between the lines differ a lot.

Reference:

• https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
• https://squidfunk.github.io/mkdocs-material/customization/#additional-javascript

[kenny-chua]

Hi @kamilkrzyskow Thank you so much for taking the time to help out. I'm no css/html/js expert. Right now, my mkdocs site is for my own documentation...... i will look at this post again when it needs to be published! I appreciate your help!! Thanks!!!