Disable word wrapping in code blocks (```)

[backloz]

Good afternoon. I’m just a novice obsidian user, so don’t judge me harshly. I’m actively using your Android OS app right now. I can’t figure out how to disable word wrapping in code blocks (```). When inserting parts of the program or comments with pseudographs, the text becomes very difficult to read, especially when I adjust the font size to a larger size. Please explain how to disable text wrapping in code blocks. I can’t find in the documentation how to do this.

[dawni]

This option has some quirks, but you could use this CSS snippet to make code blocks scroll to the right instead of wrap:

/* scroll code blocks */
code,
.HyperMD-codeblock-bg:not(:is(.HyperMD-codeblock-begin, .HyperMD-codeblock-end)) {
	text-wrap-mode: nowrap;
}

(how to use snippets)

It works well in the reading view. But in the editing views, it makes the entire page scroll, not just the code block. The best I could come up with to limit it to the block is to scroll individual code block lines, which is awkward, but here ya go in case that’s how you want to roll (er, scroll):

/* scroll code blocks in reading view */
code {
	text-wrap-mode: nowrap;
}

/* scroll code blocks in editing views */
.HyperMD-codeblock-bg.cm-line:not(:is(.HyperMD-codeblock-begin, .HyperMD-codeblock-end)) {
	> span {
		display: block;
		overflow-x: auto;
		text-wrap-mode: nowrap;
	}
}

Maybe someone else can improve that one.

[backloz]

I need a little more help. I’m still new to obsidian snippet technology. According to your instruction(how to use snippets) on my android smartphone, I performed the following steps:

1. In the .obsidian folder of my vault I created the snippets subfolder.
2. In the snippets subfolder, I created a codeblocks.css text file with the following content:

/* scroll code blocks in reading view */
code {
	text-wrap-mode: nowrap;
}

/* scroll code blocks in editing views */
.HyperMD-codeblock-bg.cm-line:not(:is(.HyperMD-codeblock-begin, .HyperMD-codeblock-end)) {
	> span {
		display: block;
		overflow-x: auto;
		text-wrap-mode: nowrap;
	}
}

4. In Obsidian, under Apperance → CSS snipets I pressed reload snippets button.
5. I enabled snippet codeblocks.css by clicking the toggle button.

But unfortunately, nothing has changed in the display of the code blocks. There is still text wrapping and I don’t see any way to scroll the code in both editing and viewing modes. Please tell me what I’m doing wrong?

[dawni]

Sounds like you took the right steps. My first thought is: Do you have a theme, plugins, or other snippets that affect code blocks?

I tested on an Android just now, and it looks like this in the default theme…

Reading:

Source mode (it’s awkward in this mode, sorry!):

Without the snippet:

[backloz]

I don’t even know what to do.
I have the following core plugins installed(see images):

and one community plugin installed(see image):

As you can see, I disabled almost all plugins during my experiments with snippets. I tried turning various settings on and off and rebooting the application. Try to set the default theme. But I have failed to achieve the same visualization of code blocks as in your picture. This is how the code block is displayed in the app on my smartphone:

Also show the contents of the .odsidian folder:

├── app.json
├── appearance.json
├── backlink.json
├── community-plugins.json
├── core-plugins.json
├── graph.json
├── hotkeys.json
├── page-preview.json
├── plugins
│   └── obsidian-excalidraw-plugin
│       ├── data.json
│       ├── main.js
│       ├── manifest.json
│       └── styles.css
├── snippets
│   └── codeblocks.css
├── themes
│   └── Obsidian Nord
│       ├── manifest.json
│       └── theme.css
├── types.json
├── workspace
└── workspace-mobile.json

Maybe I need to delete some of these folders or files? Please tell me what else could be the problem. If necessary, I can send you the full contents of my vault. I would really like to customize the visualization of the code blocks as shown in your pictures.

[ariehen]

I can confirm that dawni’s snippet is working for me on macOS and iOS.

You could try adding this to your .css file, as a test, to make sure the file is valid and being read properly:

.markdown-rendered pre code, 
.markdown-source-view.mod-cm6 .HyperMD-codeblock {
    background-color: orange;
}

Live Preview | Reading view

Also, what language have you assigned the code block (if any)? I noticed some different (and odd) behavior depending on the language set.

I’ll move this to Custom CSS & Theme Design at this point. Good luck!

[dawni]

Oh, I think see what’s up. It has to do with what ariehen said about the code block language. Try this to see if it captures all languages for you in Reading and Live Preview:

/* scroll code blocks in reading view */
code,
code.language-shell.is-loaded {
	text-wrap-mode: nowrap;
}

/* scroll code blocks in Live Preview */
.markdown-source-view.is-live-preview .HyperMD-codeblock-bg:not(:is(.HyperMD-codeblock-begin, .HyperMD-codeblock-end)) {
	display: block;
	overflow-x: auto;
	text-wrap-mode: nowrap;
}

I get this result in (from left to right) Source mode, Live Preview, and Reading:

To apply it to Source mode too, delete .markdown-source-view.is-live-preview .

(edit to add Live Preview code)