Use case or problem
Problem:
The following renders properly in Reading Mode. However, it doens’t render properly in Live Preview; the list items are not rendered, and instead the list items are rendered on one single line of normal text.
This is an argument about why apples are evil.
<div style="margin-left: 2em;">
- Here is a quote from an apple expert.
- This is a subpoint within the quote.
- Another subpoint here.
- Another quoted idea that supports the argument.
</div>
Here I continue my argument about why apples are evil.
Use Case:
Before I used Obsidian, this is how my cognitive sense-making would work, in Rich Text Format editors such as Gmail. I’d have a main line of thinking, and in the middle of the arugment, I would have clarifying bullet points indented. After the indented bullet points, the main line of thinking would continue.
To try to emulate the indentation, I asked ChatGPT for ideas, and it gave me the above code, which uses some CSS using “margin-left”.
[In reality, such “main line of thinking” itself is sometimes part of a list item, too].
(Note: I never use Reading Mode; I do all my cognitive making-sense work by typing out in Live Preview. I need the ease of making newlines and empty lines by simply pressing Enter, rather than needing to type out <br> many times).
Proposed solution
Have lists of list items and nested list items render properly in Live Preview (just as it does render properly in Reading Mode), when inside the code given (ie, inside an element with a “margin-left” style set)
I edited your post to mark the <br> so it won’t be invisible anymore. When you post example Markdown, HTML, or other code, please mark it as code to prevent the forum software from rendering or garbling it. Thanks!
The lack of support for Markdown inside HTML blocks is unfortunately an intentional deviation from the CommonMark specification that Obsidian’s Markdown derives from.
The example you posted doesn’t actually work in Reading View, tho it looks like it does. If you open the developer tools and inspect those elements, you’ll see it produces an empty div with the margin style, followed by the list, followed by an empty div with no style.
For your use case there are workarounds.
If you want all lists indented by 2em, you could use a CSS snippet to make it so.
If not, an easy option would be to indent the list under an empty list item.
-
- Here is a quote from an apple expert.
- This is a subpoint within the quote.
- Another subpoint here.
- Another quoted idea that supports the argument.
I believe this is valid Markdown, but Reading View renders this a little strangely (but in a way you may find acceptable). I don’t have time to check into it. To prevent the odd behavior you can type a period (or anything else) in the empty list item.
Another option would be to setup a custom callout that indents its contents, and use that callout type to mark these lists.
Or if you’re not otherwise using block quotes in these notes, you could put your list in those. By default they indent by some amount.
(thanks for taking the effort to write all of this out. i appreciate it.)
