Markdown does not render inline code correctly

rmuller · June 29, 2026, 2:10pm

The back-ticks shows up in the rendered output. You can see it yourself in the official Vaadin examples, Markdown component | Vaadin components (first example). I guess this is a bug, but where to file it? There are so many vaadin repos

sissbruecker · June 29, 2026, 2:29pm

The back-ticks are added through the components CSS, and looking at the Git history it looks like this was added intentionally as a stylistic choice.

You can hide these with the following CSS:

  vaadin-markdown code::before,                                                                                                                                                                                                                                                                                           
  vaadin-markdown code::after {                                                                                                                                                                                                                                                                                           
    content: none !important;                                                                                                                                                                                                                                                                                             
  }

Also feel free to open an issue here if you think this is a bad default: Issues · vaadin/web-components · GitHub

rmuller · June 29, 2026, 2:47pm

Thanks for the fast reply. If it is done intentionally, its not a bug but a feature

It is very unusual, in any case. I would rather say, if you want this style, add the CSS.

Artur · June 29, 2026, 3:05pm

github.com/vaadin/web-components

vaadin-markdown shows literal backticks around inline code

opened 03:01PM - 29 Jun 26 UTC

totally-not-ai[bot]

### Description `vaadin-markdown` renders inline code with literal backtick cha…racters around it. The base styles inject a `` ` `` before and after every inline `<code>` element via CSS pseudo-elements: ```js // packages/markdown/src/styles/vaadin-markdown-base-styles.js code { font-family: ui-monospace, monospace; font-size: 0.9em; line-height: 1.25; font-weight: 500; &::before, &::after { content: '`'; color: var(--vaadin-text-color-secondary); } } ``` (Code blocks override `content` to `''`, so this affects inline code only.) So Markdown source like `` Use the `foo()` method `` renders visibly as `` `foo()` `` — with the backticks shown. ### Expected behavior Inline code renders as code (monospace, optionally a subtle background), **without** the literal `` ` `` delimiters, matching how every common Markdown renderer behaves (GitHub, GitLab, CommonMark reference, Bitbucket, etc.). ### Actual behavior The `` ` `` delimiter characters are re-added around inline code through component CSS. ### Why this looks wrong This was reported as intentional ("a stylistic choice") on the forum, but it works against what a Markdown renderer is for: - The backtick is the Markdown *delimiter*. Re-displaying it makes rendered output look as if the Markdown was not parsed. - The injected characters are not part of the source text, so they leak into text selection and copy, and screen readers announce them as punctuation. - It contradicts the convention used by essentially every other Markdown renderer, so it surprises both authors and readers. - Removing it currently requires overriding component internals (`vaadin-markdown code::before/::after { content: none }`) rather than opting in to it. If the visual distinction of inline code is the goal, that is better achieved with the existing monospace styling plus an optional subtle background, leaving the literal backticks out by default. If there is a genuine reason to keep backticks, opting *in* (rather than out) would be the less surprising default. ### Reference Forum report: https://vaadin.com/forum/t/markdown-does-not-render-inline-code-correctly/179605/1

rmuller · June 29, 2026, 3:48pm

Thanks Artur, awesome to see how community and Vaadin work together. Really impressive!