Skip to content

Bug: Issue with inline code in tables #342

@ok-008

Description

@ok-008

Describe the bug

Hi, I've noticed that when I put syntax highlighted inline code in a table cell, a small space with the background of the code is put on the next line. While this is somewhat minor of an issue, it gets a bit annoying.

Steps to reproduce

Type some inline code (with the language specified) inside a cell of a table. Once your typing cursor is outside of that cell (assuming you are not in source mode), the issue becomes apparent.
Here's an example I tested in a vault with no community plugins or snippets. I've sent screenshots in both reading mode and live preview mode.

| Code Style                | Unformatted         |
| ------------------------- | ------------------- |
| `{cpp}int i = 0;`         | `int i = 0;`        |
| `{python}i = 0`           | `i = 0`             |
| `{js}let i = 0;`          | `let i = 0;`        |
| `{cpp}int i = 0;` Text    | `int i = 0` Text    |
| `{cpp}int i = 0;`<br>Text | `int i = 0`<br>Text |

Expected behaviour

No space after the inline code – behaviour similar to that of text between back-ticks.

Current behaviour

A small space on the next line with the background of stylised inline code.

Environment

  • Plugin Version: 1.1.7
  • Obsidian Version: 1.8.10
  • Platform: Desktop
  • OS: macOS
  • Theme: Occurs on several themes
  • CSS Snippets: Occurs even without CSS snippets

From what I've tested, this doesn't seem to be dependent on what theme or snippets I have on. It seems to occur even if I use a vault with Code Styler as the only plugin with no snippets.

Screenshots

Above Example (Live Preview)

Image

Above Example (Reading)

Image

Additional context

In the developer tools, I noticed that the <code> element for stylized inline code seems to have an extra text node as the last child node in reading mode or if the code is inside a table in live preview mode. The text node appears in the DOM like " &ZeroWidthSpace;" thought the textContent property is "\n". This doesn't seem to appear for unstylized code.

Image

Deleting this text manually in the DOM seems to fix the issue... until the page is inevitably closed and reopened.

Image

In addition, in my testing, I've found that even an invalid language will give the same effect.

`{hello, world}i=0`

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions