obsidian-style-settings icon indicating copy to clipboard operation
obsidian-style-settings copied to clipboard

Horizontal scroll on Code Blocks

Open Alexgar24 opened this issue 1 year ago • 2 comments

Hello,

First and foremost, thank you for the plugin!

The setting Minimal / Code blocks / Scroll long lines has been a significant enhancement for me, as it's a preferable alternative to wrapping long lines, which hinders readability. However, the appearance of a scrollbar under each long line detracts from the code's readability. Addressing this would benefit many users. A simple Google search for "horizontal scroll in code blocks in Obsidian" will highlight the number of individuals seeking a solution to this problem.

Thanks!

Alexgar24 avatar Sep 22 '23 08:09 Alexgar24

I would like to have this feature too!

Maybe "Word wrap" would be more precise feature.

I personally add a CSS snippet and enable it in "Appearance" Setting:

/*un-wrap code*/
.HyperMD-codeblock {
    white-space: nowrap;
}

/*scroll codeblock in read mode*/
.markdown-reading-view code[class*="language-"] {
    overflow-x: scroll;
    white-space: pre;
    padding: 15px 0px;
}

kbumsik avatar Jan 29 '24 05:01 kbumsik

+1 for this feature request. I am also experiencing a related problem where enabling Minimal > Code Blocks > Scroll long lines causes the language name / copy to clipboard button to clip vertically when in Preview Mode. The overflow causes a vertical scroll bar to appear within the button itself and the text of the language name to get cut off. Not sure whether this warrants a separate issue or if the overhaul of the setting discussed in this thread would make addressing the bug(?) unnecessary.

LudoLogical avatar May 28 '24 20:05 LudoLogical