Live Preview: Better support of code blocks in lists

Current Live Preview

Reader

8 Likes

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

    1. 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

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.

2 Likes

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

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)

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

1 Like