[Feature] Add prop to disable line numbers on code blocks

[zachkirsch]

It would be awesome if I could conditionally disable the line numbers on code blocks

[cwcowell]

👍 to this. Sometimes a page includes multiple snippets, which together form a single block of code, so it’s potentially confusing to readers to have each block restart the numbering at 1.

Even better would be to be able to either disable or specify a starting line number for a code block.

[hkosova]

It's possible to disable line numbers in all code blocks with a bit of CSS:

.code-block-line-gutter {
    display: none;
}

[cwcowell]

Building on @hkosova ’s idea, you can hide line numbers for particular code blocks like this:

In a custom CSS file:

.no-line-numbers .code-block-line-gutter {
    display: none;
}

In your MDX file:

<div class="no-line-numbers">

your code block goes here

</div>

[cwcowell]

Although… I just realized that both @hkosova ’s approach and mine remove any vertical whitespace in your code block for some reason, so there’s that downside:

So this in your Markdown:

Renders like this, with the space removed:

TL;DR: we still need this feature from Fern!

[hkosova]

I just realized that both @hkosova ’s approach and mine remove any vertical whitespace in your code block for some reason

@cwcowell try this version:

.code-block-line-gutter > span {
    display: none;
}
.code-block-line-content > .line {
    display: inline-block;
}

[cwcowell]

@hkosova Brilliant! That works perfectly.

For reference, here’s a snippet from my fern/docs/assets/styles.css using your solution:

.no-line-numbers .code-block-line-gutter > span {
    display: none;
}

.no-line-numbers .code-block-line-content > .line {
    display: inline-block;
}

And here’s a snippet from an .mdx file that uses the new CSS classes:

And here’s the rendered result with the newline intact:

[dannysheridan]

Love this! I'm working (hard) on adding another Frontend Engineer to our team so that we can turn around reported issues like this faster. I appreciate the cross-collaboration!