Markdown Inline CSS

[zakee]

Use case or problem

Markdown is the easiest way I know to write notes while formatting. And Obsidian is a great Markdown Note Taking App. But, I think this feature, which I am requesting, will make obsidian even more better.

Generally, We use a custom theme to make it look as what we want or a css snippet to overwrite the theme or a css class on frontmatter (defined on the theme or css snippet). All of these options are either global to vault or the page. But, what about single blocks. How it would be if we can style every single blocks.

Proposed solution

I think option like this, would do the work.

# Hi (style="color:red; text-align:center")

The block above is a Heading 01 defining a style. Just an Idea for how the syntax could be. On preview mode style must hide.

And also an option to define a css class for a block. Something like.

# Hi (css-class=fancy-headings)

[ryanjamurphy]

You can use HTML inline in Obsidian.

So either of the following will work:

<h1 style="color: red; text-align: center"> Hi </h1>

<h1 class="fancy-heading"> Fancy hi </h1>

Obviously, a snippet would need to style the fancy-heading class.

[zakee]

I accept html would work. But I want a way to do it using only markdown + css. So that the contents would be easy to read and customize.

[longtumb]

I recommend this plugin.
GitHub - LilaRest/obsidian-custom-classes: A minimal Obsidian plugin that allows you to add your own HTML classes to chosen Markdown elements directly from your notes.