Code block in table cells shows line breaks <br>

Bradley-James · January 3, 2024, 7:08am

Before opening a new bug report, please search the forum for duplicates and follow the Troubleshooting Guide.

We only consider bugs that are reproducible in the sandbox vault or a vault with no third-party plugins/no css snippets/default theme.
For Linux, we only accept bug reports that are reproducible with our Appimage package under Gnome or KDE.
Developer issues with the API should go here

Once you’ve done the above, delete everything above this line.

Steps to reproduce

Insert table
in any cell place code block
navigate out of cell and all line breaks show in HTML

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

Yes, can replicate in sandbox mode, obsidian and all plugins up to date

Expected result

line breaks hidden, same as when inside of any code block outside of a table

Actual result

line break show HTML tag
when navigating outside the code block in a cell

Environment

Sandbox
SYSTEM INFO:
Obsidian version: v1.5.3
Installer version: v1.4.13
Operating system: Windows 10 Home 10.0.22631
Login status: logged in
Catalyst license: none
Insider build toggle: off
Live preview: on
Base theme: adapt to system
Community theme: none
Snippets enabled: 0
Restricted mode: on

RECOMMENDATIONS:
none

Current setup
SYSTEM INFO:
Obsidian version: v1.5.3
Installer version: v1.4.13
Operating system: Windows 10 Home 10.0.22631
Login status: logged in
Catalyst license: none
Insider build toggle: off
Live preview: on
Base theme: adapt to system
Community theme: none
Snippets enabled: 0
Restricted mode: off
Plugins installed: 7
Plugins enabled: 7
1: Importer v1.5.6
2: Advanced URI v1.38.1
3: Editor Syntax Highlight v0.1.3
4: ReadItLater v0.4.0
5: Dataview v0.5.64
6: @ Symbol Linking v1.6.0
7: Plaintext v0.3.0

RECOMMENDATIONS:
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 Sandbox Vault or disable community plugins.

Additional information

WhiteNoise · January 3, 2024, 4:09pm

It’s not a bug. code blocks in cells is not a thing in markdown.

SeaAyAy · January 31, 2024, 11:14am

I have the same use case scenario embedding the code block (with multiple lines) into a table so that the syntax difference with example code (e.g. hello world program) for some new language can be shown in a table for easy comparison.

So far I am using the Embed files syntax (i.e. ![[XXX]]) with the code block placed into the sub-heading sections created on the same note, but the indentation spacing and the section heading is occupying the tight space in the table cell.

Therefore, it would be lovely to know that if there are some other workaround for showing the multi-line code block inside a table, thanks.

jurbanek · February 13, 2024, 9:41pm

Running into this as an issue as well.

Inline code blocks (single back tick) render fine when focus is inside the cell and when focus leaves the cell.

Code blocks (triple back tick) render fine when focus is inside the cell but the rendering breaks when focus leaves the cell.

Given rendering works fine when cursor focus is in the cell and then breaks when cursor focus leaves the cell leads me to believe this may be more of a bug.

Image above cursor focus is outside the table.
Row 1 is inline code block, two of them in a row for sake of example. Renders fine with or without focus.
Row 2 is code block (multiline), does not render correctly <br>'s present when cursor focus leaves the cell.

but… move focus into the cell and code block (multiline) rendering is working (no <br> visible)

Note the cursor is now in Row 2 multiline code block and rendering is working without <br>.

holroy · February 15, 2024, 3:58pm

I reckon you’ve written up your examples in live preview and this is strangeness happening due to trying to introduce multiline blocks within the markdown for tables, which in general isn’t a good thing to do.

Viewing something which seems to be similar to your example in source mode looks like this:

| Entity type | VLAN                                           |
| ----------- | ---------------------------------------------- |
| Central     | `1 Default`<br>`4 Wired-public`                |
| Branch      | ```<br>1 Default<br>4 Wired-public<br>```      |

And even though live preview’s table editing feature displays it correctly when you’re inside the editing, it’s not good markdown either way.

One variant I tried which kind of displays OK (besides your first option) is to fake the output using a dataview inline query:

| Yet another | `$= dv.el("pre", "1 Default\n4 Wired-public") ` |

With this as the last line, the entire table now renders as:

I’m not sure what other methods there exists to get a multi-line code block into a table. I’m considering whether you could use embedding to do so, but not sure how to do that and still have it readily available for editing.

jurbanek · March 25, 2024, 12:15am

Apologies for the delayed reply. Thank you for the response and the idea to use a dataview inline query.

I completely agree multi-line code block (triple backtick) inside of a markdown table cell introduces dependency/intent/parser challenges. On the other hand, a reason for adding visual editing to markdown tables in Obsidian is to make tables, especially complex/large tables, easier to manage. Concepts like multiline code blocks in a table cell are made more possible with a visual editor, bad markdown or not.

The “tables need this feature” discourse probably feels like an avalanche. I don’t envy the parser trying to make sense of a multiline code block in a markdown table cell… but it does work fine for inline code blocks.

As a 15 year OneNote user who switched to Obsidian about a year ago, robust tables are the only thing I miss. I respect the way Obsidian developers have built table support.

Take care and thank you for the recommendation.

holroy · March 25, 2024, 12:47am

In another post I made today, I suggested using note embeds in a table, and I’m starting to wonder if that would be a great suggestion for you as well. Especially in the combination with the hover editor plugin.

So let say your table resides in the “Network” note, and it looks like this:

| Entity Type | VLAN                      |                            | 
| ----------- | ------------------------- | -------------------------- |
| Central     | ![[Network_ET_Central\|]] | [[Network_ET_Central\|📝]] |
| Branch      | ![[Network_ET_Branch\|]]  | [[Network_ET_Branch\|📝]]  |

I tested this, and I couldn’t in a very quick test get the hover editor to trigger on only the embedded text, but doing it like above with one embed link and one for editing (with the icon) worked. With the addition of cssclasses: clean-embeds this makes for a rather clean solution, which displays like this in reading view while hovering over the pencil icon, , on the second row:

And you can edit whatever you want in that hover editor, like even adding a full table if you so desire. Not that I recommend adding tables in tables, but it’s possible.

I’m sure you could use some CSS to make an even more seemless experience, but it for sure allows you to add whatever into a table using the embeds. Now if only it was possible to get it to trigger on the embedded link somehow.

holroy · March 25, 2024, 12:57am

It turns out that in live preview it’s possible to use just the embedded variant if you first execute the Hover Editor: Toggle bouncing popup command. Then you can use just the embedded variant. Then you can open the preview to access the hover editor without it going crazy with flashing/popping up and down all the time.

You might fiddle around a little, but try it out, and you’ll get the hang of it, and then you would be able to edit the a complete note within a random table cell.