Indented code block looks glitchy in Live preview mode

Bug reports
, ,
1

Steps to reproduce

  1. Copy the following text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  1. Paste it into a note
  2. Make sure that you’re in live preview mode
  3. Highlight the text and hit tab to make it a code block

Did you follow the troubleshooting guide? [Y/N]

Yes

Expected result

Should appear as a code block like it does in reading mode:

image
image1558×452 42.7 KB

Actual result

The visual appearance is completely inconsistent with reading mode, and if the text is multiple lines the appearance is very bugged with a vertical line appearing under the text:

image
image1420×436 47.3 KB

NOTE: It looks slightly better in source mode, but still pretty bad with the verticle line being too close to the text:

image
image1416×410 41.9 KB

Environment

SYSTEM INFO:
Obsidian version: v1.8.10
Installer version: v1.8.10
Operating system: Windows 11 Pro 10.0.26100
Login status: logged in
Language: en
Catalyst license: insider
Insider build toggle: off
Live preview: on
Base theme: adapt to system
Community theme: none
Snippets enabled: 0
Restricted mode: on

RECOMMENDATIONS:
none

2

thanks. It’s not preformatted text. It’s a codeblock

3

Screenshot 2026-08-21 at 15.32.18
Screenshot 2026-08-21 at 15.32.181450×606 60.4 KB

Code block indentation seems to be broken. This is using the default theme, no snippets and no community plugins

Steps to reproduce

  1. Create a new note
  2. Press the tab key for indentation
  3. Write a line long enough that it word wraps

Expected result

That the line indentation is in line with the code block

Actual result

The line is resetting to zero on wrap

Environment

Latest version on MacOS with latest Obsidian version

4

similar:

5

Yes, same. I don’t understand the answer, though?

thanks. It’s not preformatted text. It’s a codeblock

Does that mean it’s expected behavior?

I made a CSS snippet that fixes the indentation for tabbed codeblocks in preview for me. Maybe others experiencing the same issue find it useful.

Play with the values at the top in case you are using a different font or other.

tab indent fix.css (2.5 KB)

6

The bug report is marked “repro” and remains open, which means the team reproduced it and considers it a bug. Getting a “thanks” from WhiteNoise is another indication that the team understands what the OP reported.

It’s not preformatted text. It’s a codeblock

It seems the original post called the code blocks “preformatted text” until someone (OP or a mod) edited the title and content to identify it as a “code block”.

I haven’t tried your CSS, but if the two posts get merged, it could increase the chances that folks find your workaround when they come searching.

7

Great, thanks.

For anybody looking for an momentarily solution, the CSS snippet I shared works for me.

Screenshot 2026-08-22 at 07.59.03
Screenshot 2026-08-22 at 07.59.031610×836 183 KB

Here is it in code, going up to indent level 10:

body {
   --ms-code-tab: 1.8ch;
   --ms-code-nudge: 0ch;
}

.markdown-source-view.mod-cm6
.cm-line:has(.cm-hmd-indented-code) {
    --ms-wrap-indent: calc(1 * var(--ms-code-tab) + var(--ms-code-nudge));
    padding-inline-start: var(--ms-wrap-indent) !important;
    text-indent: calc(-1 * var(--ms-wrap-indent)) !important;
}

.markdown-source-view.mod-cm6
.cm-line:has(.cm-hmd-indented-code):has(.cm-indent ~ .cm-indent) {
    --ms-wrap-indent: calc(2 * var(--ms-code-tab) + var(--ms-code-nudge));
}

.markdown-source-view.mod-cm6
.cm-line:has(.cm-hmd-indented-code):has(.cm-indent ~ .cm-indent ~ .cm-indent) {
    --ms-wrap-indent: calc(3 * var(--ms-code-tab) + var(--ms-code-nudge));
}

.markdown-source-view.mod-cm6
.cm-line:has(.cm-hmd-indented-code):has(.cm-indent ~ .cm-indent ~ .cm-indent ~ .cm-indent) {
    --ms-wrap-indent: calc(4 * var(--ms-code-tab) + var(--ms-code-nudge));
}

.markdown-source-view.mod-cm6
.cm-line:has(.cm-hmd-indented-code):has(.cm-indent ~ .cm-indent ~ .cm-indent ~ .cm-indent ~ .cm-indent) {
    --ms-wrap-indent: calc(5 * var(--ms-code-tab) + var(--ms-code-nudge));
}

.markdown-source-view.mod-cm6
.cm-line:has(.cm-hmd-indented-code):has(.cm-indent ~ .cm-indent ~ .cm-indent ~ .cm-indent ~ .cm-indent ~ .cm-indent) {
    --ms-wrap-indent: calc(6 * var(--ms-code-tab) + var(--ms-code-nudge));
}

.markdown-source-view.mod-cm6
.cm-line:has(.cm-hmd-indented-code):has(.cm-indent ~ .cm-indent ~ .cm-indent ~ .cm-indent ~ .cm-indent ~ .cm-indent ~ .cm-indent) {
    --ms-wrap-indent: calc(7 * var(--ms-code-tab) + var(--ms-code-nudge));
}

.markdown-source-view.mod-cm6
.cm-line:has(.cm-hmd-indented-code):has(.cm-indent ~ .cm-indent ~ .cm-indent ~ .cm-indent ~ .cm-indent ~ .cm-indent ~ .cm-indent ~ .cm-indent) {
    --ms-wrap-indent: calc(8 * var(--ms-code-tab) + var(--ms-code-nudge));
}

.markdown-source-view.mod-cm6
.cm-line:has(.cm-hmd-indented-code):has(.cm-indent ~ .cm-indent ~ .cm-indent ~ .cm-indent ~ .cm-indent ~ .cm-indent ~ .cm-indent ~ .cm-indent ~ .cm-indent) {
    --ms-wrap-indent: calc(9 * var(--ms-code-tab) + var(--ms-code-nudge));
}

.markdown-source-view.mod-cm6
.cm-line:has(.cm-hmd-indented-code):has(.cm-indent ~ .cm-indent ~ .cm-indent ~ .cm-indent ~ .cm-indent ~ .cm-indent ~ .cm-indent ~ .cm-indent ~ .cm-indent ~ .cm-indent) {
    --ms-wrap-indent: calc(10 * var(--ms-code-tab) + var(--ms-code-nudge));
}
8

The second comment and others from there to here were merged in from a separate thread (by me).