Live Preview: Better support of code blocks in lists

[WhiteNoise]

Current Live Preview

Reader

[Gamuza]

Steps to reproduce

Code block didn’t display properly with review mode.

problem 1. If I apply code block in an indent format, the vertical line position will be placed at a wrong place.

problem 2. if I write a long code in the code block, the display of the second line of the code will be start without indent, which is unacceptble for reading.

problem 3.The background color of the code block is at wrong place. It should be indented.

1. kkkk

   2. upload

      #sfgsdf run
      sudo sh cuda_11.3.0_465.19.01_linux.run fgsdfgsdfgsdfgsdfgdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgdsfg
      

      sgfsdfgsdfg

Expected result

Environment

• Operating system: Win10
• Obsidian version: v0.14.2

---

Additional information

[gimboland]

Steps to reproduce

In a note, enter the following:

* Here is a list item

  ```text
  Here is a code block within that list item
  ```

Expected result

I’d expect to see the code block rendered in the editor in a way that makes it clear the block is nested inside in the list, i.e. in a manner consistent with the preview view, which gets this right.

Actual result

The code block is rendered with a background that isn’t indented, making it appear that the code block is a top-level item which happens to contain code where every line is indented.

Screenshot:

Environment

• Operating system: MacOS 10.14.6

• Obsidian version: 0.6.4

• Using custom CSS: no

---

Additional information

Here’s a screenshot of the preview view getting the rendering right:

Here’s a similar bug report: Syntax highlighting is broken for block quotes in bulleted lists — but I think it’s probably a different case.

[s-kyy]

I have this issue as well! Using Windows 10 on Obsidian 0.6.7.

[efemkay]

i agree, maybe what the editor can do is that detect that code block is being indented and keep the indentation until the closing backticks.

anyway, here’s my workaround to make it looks more in place (in case it helps u). i wrote the code block without bullet, and then just indent it (as many time as the bullet depth (first level - one tab, 2nd level - two tab)

[featurerequestaccoun]

Is there any way to track the progress, a roadmap or anything similar?

[mtesn]

Any plan for this? Typora dont have such issue, it makes me want to use Typora instead

[konanima]

I use Typora as default “open with” for md files, this way I can directly open in Typora from Obsidian

[nixsee]

I also see this. Its a minor nuisance, but would be nice if it could get fixed.
Here’s a code block that i’ve indented with either 4 spaces or a tab.
Live Preview:

Preview:

The code block in Live Preview extends to the left edge of the page, but is indented properly when in normal Preview mode

[featurerequestaccoun]

Pls fix.
Thank you.

[JamesKF]

So what is the current state of code blocks in lists ? I’m currently unable to make it work : code block always span the width of my note.

Is it already implemented but buggy ? Is it planned ?

Thanks

[kkshinkai]

I still don’t understand why people don’t care about this so important feature …

[wwf194]

All of my notes are organized as nested lists, where relationship between contents are naturally indicated by their indentation level.
If would be weird if text, pictures, pdf, etc could be nested list items, while code blocks can not.

[jerviscui]

Is there a solution?
Source Mode should reject all styles

[jerviscui]

Is there a way to get Source Mode to not show styles?

Use the ob default theme. [image] The left side is source mode, the right side is reading view. the indent lines don’t line up, the red boxes are all at the same indent level, but the edit mode renders in a style that makes it impossible to write at all. This is the effect of other editors, source mode without rendering styles is more suitable for editorial work, [image] The line breaks in this code block are also confusing [image]

[robertandrews]

Taio:

Obsidian:

- this is an ordered list

- with a:

	```bash
	codeblock in it, which indents nicely
	```

- oh look, it even keeps adding bullet points just by pressing enter

```bash
here a non-indented code block

Code via Discord

[jerviscui]

The indentation of the list and code block has been solved.

Is there a way to get Source Mode to not show styles?

I think I solved the problem. Now I am using the Inconsolata font and using the following css. /* list Indent */ .mod-cm6 .HyperMD-list-line.cm-line { padding-top: var(--list-spacing); padding-bottom: var(--list-spacing); text-indent: 0 !important; padding-inline-start: 0 !important; } /* quote Indent */ .mod-cm6 .HyperMD-quote.cm-line { text-indent: 0 !important; padding-inline-start: 0 !important; } /* codeblock Indent */ .markdown-source-view.mod-cm6 .cm-line.Hyper…

[jerviscui]

Linking a question: Code blocks in list error

[iltaek]

Please fix this generally.
I think @jerviscui 's solution is just a hack. (add custom css and specific font.)
I want to return to Typora because of this.

You know what, I am going to use Typora until this is fixed.
I think this, supporting code blocks in lists, is not a new feature but bug.

[selen]

I do not understand why this is not being marked as a top priority? There is no reason whatsoever why a code block should not be able to seamlessly integrate with an ordered/unordered list BY DEFAULT…

PLEASE PRIORITIZE THIS FIX. It is basic functionality and you are alienating an entire category of users (programmers) from wanting to use your tool.

If I was a maintainer, the lack of this feature would be embarrassing, honestly. As @iltaek mentioned this is a BUG not a feature request.