Code blocks with horizontal scrolling instead of line breaks

otlyn · November 23, 2021, 11:05am

Currently, code wraps to a new line if it’s too long. It would be better if code blocks were full width with horizontal scrolling for hidden elements. This allows for proper formatting and makes reading code easier.

Browneyedsoul · November 23, 2021, 11:38am

How about this?

github.com

browneyedsoul/RemNote-CSS-Library/blob/main/Modern Scrollable Code Block.css

:root {
    --inline-code-color: #E64400;
    --inline-code-background-color: #F7F6F3;
    --darkmode-background: #2F3437;
    --darkmode-text: #DFDFD5;
    --code-node-background-color-dark: #E6E6E6;
    --code-font-family: "Roboto Mono", "Fira code", Monospace;
    --code-font-size: 0.9em;
    --line-number-width: 40px;
    --line-number-color: #C7CCCF;
    --line-number-color-dark: #BDBEBE;
    --line-number-background-color: #F7F6F3;
    --line-number-background-color-dark: #E6E6E6;
    --code-node-border-radius: 2px;
}

/*********** Basic (Inline)CodeBlock Style ***********/
    .quote {
        font-family:        var(--code-font-family);
        font-size:          var(--code-font-size);

This file has been truncated. show original