Code snippets are rendered as tags

Hi all,

I’ve recently tried moving a note of mine about the basics of HTML from Notion to Obsidian and noticed something strange (to me at least).

As the note is about HTML, I have lots of code blocks within the note. Now these came across perfectly with a simple copy-paste from Notion, but what’s strange is how these code blocks are rendered in preview mode. In preview mode these code snippets are displayed as clickable tags:

Edit mode

Preview mode
Preview mode

Is this a theme issue (I am using the Minimal theme btw)? or something on Obsidian’s end?

Also, I’m really pleased to see the syntax highlighting in the preview mode - is this a coincidence because its HTML or is this supported in Obsidian? or again is this a theming thing?

Hi themixx, I think it may be a theme issue - give another one a try to confirm it. HTML syntax highlighting is supported in Obsidian

Markup - markup, html, xml, svg, mathml, ssml, atom, rss

By tha way, you can check the full list of supported languages

Edit mode: Verify your code block is exactly like this

```html
<img src="cat.jpg" alt="cat">
```

Preview: you should be seeing something like this

preview-cat-html

Hope this helps you!

Hey andrezgz,
Thanks for the reply and tips. I tried it out with a few themes and the tag-pill is definitely part of the Minimal theme - BUT with all themes that I tried if you click on the code in preview mode, it triggers a “tag:” search. Quite strange behavior.

Wow, that behavior is weird, indeed! :open_mouth: I confirm what you’ve found:

if you click on the code in preview mode, it triggers a “tag:” search

For reference, the search field shows: tag:<img src="cat.jpg" alt="cat">

Also depending on where in the code snippet you click the search changes

fixed in 0.9.21

2 Likes

great! thanks :slight_smile: