Broken code block rendering in callouts

Bug reports
,
1

Steps to reproduce

  1. Create a note
  2. Insert this code
> [!example]
> > [!failure] Bad
> > `Validate(Filter(...))`
>
> > [!success] Good
> > ```go
> > var items []Item
> > filteredItems := Filter(items)
> > validatedItems := Validate(filteredItems)
> > ```

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

Yes.

Expected result

Same callout view in preview and edit mode. There is an padding between callout-title and callout-content.

Actual result

Different callout view in both modes. No padding between callout-title and callout-content if callout-content contains a code block.

Environment

SYSTEM INFO:
	Obsidian version: v1.6.7
	Installer version: v1.6.7
	Operating system: Windows 10 Pro 10.0.19045
	Login status: not logged in
	Insider build toggle: off
	Live preview: on
	Base theme: adapt to system
	Community theme: none
	Snippets enabled: 0
	Restricted mode: on

RECOMMENDATIONS:
	none

Additional information

callout-paddings
callout-paddings1097Ă—708 105 KB

2

It appears that this rule here is the issue with fenced code blocks in callouts:

.markdown-source-view.mod-cm6 .cm-embed-block pre {
    margin: 0;
}

Screenshot 2024-10-02 084041
Screenshot 2024-10-02 0840411060Ă—280 21.1 KB

I don’t know if this is the best approach, but this CSS snippet can be used for a quick fix (for the code block section).

.is-live-preview .callout :is(.cm-embed-block pre) {
    margin: 1em 0;
}

Live Preview | Reading view

Screenshot 2024-10-02 085835
Screenshot 2024-10-02 0858351113Ă—336 20.3 KB

1 Like
3

Thanks, that fixed the padding issue with code blocks in callouts. But I still have an issue with the padding between “Example” and “Bad”: in live preview the padding is bigger than in reading view as shown in the screenshot with the top arrows. I sorry for using padding instead of margin. I actually mean margin.