Obsidian auto heading size for embeds/transclusion

[otatea]

Introduction

I user Obsidian and prefer to make my notes as short as possible to reuse them in different contexts. Thus I heavily rely on embedding/transcluding notes inside other notes which then are embedded in other notes and so on.

The Problem

Headings!

A) I would like to use the Title of the embedded note as a heading. But I need an option to change the size of that heading (e.g. if I embed underneath a “## heading 2” I would like to make the title of the embed the size of “### heading 3”

B) Headings inside of the embed are the same size no matter of the context. So a “# heading 1” in the embed stays like this, even though I embedded it beneath a e.g. “### heading 3”.

My goals

1. Be able to set the size of the title of the embed like “![note name|h1]” to make it look like “# note name” and so on.
2. Adjust appearance of all headings inside the embed automatically according to the setting described in 1… So if I say “![note name|h2]”, then a “# heading” will appear as a “### heading”.
3. make the same as 2.1 with all titles of embeds inside the embed.

Thank you

In advance. Would be grateful for all ideas on how to make this, cause I’m quite new to obsidian, CSS, and so on and have no clue how to do it.

[thubtenrigzin]

Hello,

I have the exact same problem and will soon move to make a plugin for that!

But if you want to make the illusion, you can add a simple snippets which will transform the h1 style to the h2 style, h2 to h3 and so on… anyway as we can’t change the tag itself in css, this will only change its appearance and not the tag itself.
This is a temporary approach before finding or making a new plugin for that.

So you need to pick up all the h3 style (if you want to change the h2 to h3) with the developer tools by pressing [ctrl]+[shift]+i and get all the css properties for the h3

then add this simple snippet:

.internal-embed[alt*="h2-h3"].markdown-embed h2 {
    font-weight: var(--h3-weight);
    font-variant: var(--h3-variant);
    letter-spacing: -0.015em;
    line-height: var(--h3-line-height);
    font-size: var(--h3-size);
    color: var(--h3-color);
    font-weight: var(--font-weight);
    font-style: var(--h3-style);
    font-family: var(--h3-font);
    margin-block-start: var(--p-spacing);
    margin-block-end: var(--p-spacing);
}

and by the way, write your the embed note like that to make it work:

![[note|h2-h3]]

Hope it will help, all the best!

[thubtenrigzin]

and if you want to change multiple title styles at the same time, you can do this as well:

![[note|h2-h3 h3-h4]]

and add your h4 style within your snippet by following the same logic above

[thubtenrigzin]

or even better by using:

![[note|h+1]]

to increment all the headers at once

I use this snippet for the h2, h3, h4 which now has the appearance of h3, h4 and h5:

.internal-embed[alt*="h+1"].markdown-embed h2 {
    font-weight: var(--h3-weight);
    font-variant: var(--h3-variant);
    letter-spacing: -0.015em;
    line-height: var(--h3-line-height);
    font-size: var(--h3-size);
    color: var(--h3-color);
    font-weight: var(--font-weight);
    font-style: var(--h3-style);
    font-family: var(--h3-font);
    margin-block-start: var(--p-spacing);
    margin-block-end: var(--p-spacing);
}
.internal-embed[alt*="h+1"].markdown-embed h3 {
    font-weight: var(--h4-weight);
    font-variant: var(--h4-variant);
    line-height: var(--h4-line-height);
    font-size: var(--h4-size);
    color: var(--h4-color);
    font-weight: var(--font-weight);
    font-style: var(--h4-style);
    font-family: var(--h4-font);
}
.internal-embed[alt*="h+1"].markdown-embed h4 {
    font-weight: var(--h5-weight);
    font-variant: var(--h5-variant);
    font-size: var(--h5-size);
    line-height: var(--h5-line-height);
    color: var(--h5-color);
    font-weight: var(--font-weight);
    font-style: var(--h5-style);
    font-family: var(--h5-font);
}

What do you think?

[ariehen]

Good luck with the plugin and continued CSS options!

I’m going to move this to the custom CSS category at this point.

[SetUpYourSkills]

I would be happy to help if you need