I hated how my code blocks had a scroll bar that forced me to scroll to see all the code—very inconvenient given that I use Obsidian for quick reference notes, and having to scroll sideways kills the “quick” part of quick reference. Anyway, I wrote a CSS snippet to fix this.
.markdown-preview-view pre > code[class*="language-"], /* This targets anything with a specified language. I needed to add it to make this rule more specific than the rule that forces non-wrapping code */
.markdown-preview-view pre > code {/* This targets anything that doesn't have a specified language for good measure */
white-space: pre-wrap;
}
.markdown-preview-view.nowrap pre > code[class*="language-"],
.markdown-preview-view.nowrap pre > code {
white-space: pre;
}
This will wrap any and all code blocks it comes across unless you apply the nowrap
class as a cssclass in your frontmatter like this
---
cssclass: nowrap
---