I want to move gutter or line numbers outside of content area like screenshots below.
I struggled with some custom CSS but I cannot achieve because the content area’s layout is fixed.
Is there any solution for this? Thanks for your help!
The Minimal theme, by default shifts the gutters with the line numbers to the left of the content ( .cm-scroller ) area. Minimal theme screenshot:
Here is a section of Minimal’s CSS that seems working in the default theme but may have unintended results without the rest of Minimal’s block width features. You could give it a try.
body :not(.canvas-node) .markdown-source-view.mod-cm6 .cm-gutters {
position: absolute;
z-index: 0;
margin-inline-end: 0; }
Thank you for the response!
Minimal’s solution is nice but with a wide monitor, it’s hard to see the gutters. (It’s too far!)
I tried position: absolute on the custom CSS but I couldn’t find the way to make the gutters “stick” with the content.
I need something relative, like a 20px vertical margin from the content.
Do you mean vertical here? If so, I don’t follow.
Not vertical, but this may be a bit better?
body :not(.canvas-node) .markdown-source-view.mod-cm6 .cm-gutters {
margin-left: -40px;
}
No snippet:
With snippet:
Oh! I meant horizontal. Sorry, I dozed off.
And yes, that solution works great!
Thank you very much for your kind help!
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.
