carbon-app / carbon

:black_heart: Create and share beautiful images of your source code
https://carbon.now.sh
MIT License
34.29k stars 1.9k forks source link

Feature request: increase spacing between line numbers and code #1497

Open terrylinooo opened 7 months ago

terrylinooo commented 7 months ago

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.

terrylinooo commented 7 months ago

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.

Bashamega commented 5 months ago

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

https://github.com/carbon-app/carbon/assets/110662505/1ea9e4f0-6b56-442c-a187-e87b6a972298