carbon-app / carbon

:black_heart: Create and share beautiful images of your source code

Home Page:https://carbon.now.sh

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Feature request: increase spacing between line numbers and code

terrylinooo opened this issue · comments

I'm suggesting an enhancement to the spacing between line numbers and code content for better readability, especially when printed.

image

Is your feature request related to a problem? Please describe.

Currently, the line numbers are very close to the code, which makes it difficult to distinguish between them at a glance, especially when the code is printed on paper. This affects readability and can lead to confusion when referring to specific lines during code reviews or discussions.

Describe the solution you'd like
I would like to see an option to increase the spacing between line numbers and the code block. This could be a setting that allows users to adjust the spacing to their preference.

Describe alternatives you've considered
As an alternative, a default increase in spacing could be implemented if adjustable settings are not possible. Another option could be to have a print-friendly mode that automatically adjusts the layout for better legibility on paper.

Additional context
The issue becomes particularly evident when printing documents for review. Please see the attached screenshot for reference. Thank you for considering this enhancement to improve the clarity and readability of code blocks.

For someone who wants same feature, for now you can do this:

1)

Download User JavaScript and CSS Chrome extension.

2)

Browse carbon.now.sh, open the extension, fill in the following code.

JavaScript

window.onload = function() {
    Array.from(document.querySelectorAll('.CodeMirror-linenumber')).forEach((el) => {
        el.removeAttribute('style');
    });;
};

CSS

.CodeMirror-linenumber {
    padding-right: 15px;
}

Replace the 15px with your expected padding value.

You can increase it from the settings.
this is a video showing you how

video1775034738.mp4