HTML in Code blocks nested in callouts don't work in Live Preview

In Live Preview, multi-line HTML code blocks in callouts are not rendered correctly. They do render correctly in Reading view.

Steps to reproduce

  1. Create a callout
  2. Create a multi-line HTML code block in the body of the callout
  3. Toggle between Live Preview and Reading view

Expected result

The entire code block should be rendered as part of the callout in Live Preview.

Actual result

In Live Preview, the first line is rendered as part of the callout, but the rest of the code block lines are not.

Environment

  • Operating system: Windows 10
  • Debug info:
    SYSTEM INFO:
    Obsidian version: v0.14.5
    Installer version: v0.13.24
    Operating system: Windows 10 Pro 10.0.19043
    Login status: logged in
    Catalyst license: supporter
    Insider build toggle: on
    Live preview: on
    Legacy editor: off
    Base theme: dark
    Community theme: Vileplume
    Snippets enabled: 0
    Safe mode: off
    Plugins installed: 17
    Plugins enabled: 15
    1: Relative Line Numbers
    2: Outliner
    3: Hotkey Helper
    4: Dataview
    5: Emoji Toolbar
    6: Pane Relief
    7: Vault Statistics
    8: Search Everywhere
    9: Quick Explorer
    10: Automatically reveal active file
    11: Filename Heading Sync
    12: Quick Switcher++
    13: Core Search Assistant
    14: Sliding Panes (Andy’s Mode)
    15: Pandoc Plugin

RECOMMENDATIONS:
Custom theme: for cosmetic issues, please first try updating your theme to latest. If still not fixed, please try to make the issue happen in the help vault or disable community theme and snippets.
Community plugins: for bugs, please first try updating all your plugins to latest. If still not fixed, please try to make the issue happen in the help vault or disable community plugins.


Additional information

2 Likes

We don’t support it. Please, open a feature request.

Chatted with Licat about the issue on Discord.

He and I experimented a bit. The code block in a callout worked until I put HTML markup in it. (And it did render correctly in the Reading view.)

He suggested creating a bug report.

But, I’m happy to create a feature request, if that is the best way to handle it.

1 Like

which html block did you put exactly?

image

ah but this is code block that contains html. OK.

Correct.

I’m experiencing the same issue currently but with C++ imports

Example (taken in live preview, the bug does not exist in reading mode):

I think the issue is with the > symbol, which obsidian might be interpreting as a new “block quote”?

1 Like

Same here with the personal Blazor documentation I’m working on.

Note that

  1. I’m not using live preview but the regular editing view (I prefer to have content and rendering in two separate panes), so it’s not just a live preview problem.
  2. The code block rendering in the edit view breaks at the typed ILogger, which excludes any nested code block of a language that contains the < and/or > symbols from working in callouts - or block quotes in general.
  3. The general rendering in the edit view breaks in that note from that point forward (which may point towards this being related to this problem

The vexing part about this is that the callouts work perfectly in the rendered view and are by far the easiest way to achieve collapsible code blocks…

2 Likes

I have the same problem, but it occurs with the Buttons plugin. I’ve added a button to a template. However, when I open the template or create a new note using the template, the button doesn’t show.

I have to click inside and then outside the code block to get the button to display.

After reading the posts in this bug report, I opened the template in reading mode, and there wasn’t any problem.

1 Like

I’m experiencing the same issue with any multi-line code block inside a callout. I’m using a MacBook M1.

1 Like