Basic HTML codes *For those who want to learn useful tips and tricks for their Obsidian

Introduction

Hi, I was browsing and just found this wonderful website where you can learn a lot of things that can improve your obsidian.

I just wanted to share something that may be helpful for people interested in HTML for their Vault.

Link : HTML Tutorial

Example of cool things you can learn

Template : (HTML font tag)
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

Result :


Template : (HTML font tag)
<p style="font-family:verdana">This is a paragraph.</p>
<p style="font-family:'Courier New'">This is another paragraph.</p>

Result :


Template : (Colors can be set using color names)

<div style="background-color:blue">
  <h1 style="color:yellow">Heading</h1>
</div>

Result :


There are still a lot of things to explore. Enjoy!

2 Likes

IMNSHO (In My Not So Humble Opinion) this should be the way to implement any markup outside the commonmark spec - say highlights should be done with <mark class="my-pink-highlight">Hello</mark> and admonitions should be a div with appropriate children and so on.

My reasoning is this: If and when Obsidian stops functioning, you might find it difficult to find a parser to transform obsidian specific markup to an abstract syntax tree and from there to a target format. Parsing with self-written regex is not a forest you want to go deep into.

1 Like