Headerless Transclusions

Share & showcase
1

Hi all, I’ve been wondering for a while how to write custom CSS to render transclusions without titles, and especially without headers if linking to a section in a note. There used to be a thread on this forum, but it’s been closed, and none of the solutions there were working anymore.

So today, I’ve finally figured out how to do it properly, including making sure that only the first heading or the title are hidden, but other headings are still visible.

As a bonus, this CSS also displays the source file (and section) in small, grey font at the top, so you know where clicking the link will lead you. If you’re not into that, just remove the corresponding sections from the CSS.

/* disable title */
.markdown-embed-title {
  display: none;
}

/* Disable the first header in the embed (which is the third div), but only if this
isn't an embed of a complete node (which can be detected through checking whether the
title is empty). */
.markdown-embed-title:empty~.markdown-embed-content .markdown-preview-view .markdown-preview-sizer div:nth-child(3) :is(h1, h2, h3, h4, h5, h6) {
  display: none;
}

/* show the source in small, grey font at the top */
.markdown-embed::before {
  content: attr(alt);
  display: block;
  font-size: var(--font-smallest);
  color: var(--text-muted);
}

/* change the link background so it's occludes the text when it overlays the source */
.markdown-embed-link {
  background: var(--color-base-00);
  opacity: 1;
}

.markdown-embed-link:hover {
  background: var(--color-base-25);
  opacity: 1;
}

And here’s a test, embedding parts of this file

image
image709×646 20.1 KB

in another file:
image
image855×1465 25.1 KB

That’s it, have fun!

And BTW, if anyone figures out how to reduce the spacing before/after transclusions, let me know!

21 Likes
2

There is also a snippet by @SlRvb that does that:

.internal-embed[alt*="n-h1"].markdown-embed h1,
.internal-embed[alt*="n-h2"].markdown-embed h2,
.internal-embed[alt*="n-h3"].markdown-embed h3,
.internal-embed[alt*="n-h4"].markdown-embed h4,
.internal-embed[alt*="n-h5"].markdown-embed h5,
.internal-embed[alt*="n-h6"].markdown-embed h6 {
    display: none;
}

This allows you to exclude individual heading levels. The syntax for the transclusion would be ![[note name|n-h1]] or ![[note name|n-h2]], etc.

She has also provided a snippet to exclude all the different heading levels:

.internal-embed[alt*="no-h"].markdown-embed h1,
.internal-embed[alt*="no-h"].markdown-embed h2,
.internal-embed[alt*="no-h"].markdown-embed h3,
.internal-embed[alt*="no-h"].markdown-embed h4,
.internal-embed[alt*="no-h"].markdown-embed h5,
.internal-embed[alt*="no-h"].markdown-embed h6 {
    display: none;
}

The syntax the becomes ![[note name|no-h]].
It is in her “ITSq”theme.

9 Likes
3

@Texfy incredible - THANK YOU!! I can’t tell you how much those transcluded titles have been bugging me.

While it worked for the section titles, your selector didn’t work for me for the main titles. I changed it to this and now it works:

.markdown-embed-title:empty~.markdown-embed-content .markdown-preview-view .markdown-preview-sizer div:nth-child(3) :is(h1, h2, h3, h4, h5, h6),
.markdown-preview-view .markdown-preview-sizer div:nth-child(4) :is(h1, h2, h3, h4, h5, h6) {
    display: none;
}

I’m not sure why mine doesn’t work the same. I am using the default theme.

@Klaas this CSS is different from the one you posted in that it targets only the first title regardless of what type it is.

1 Like
4

I am not sure what you mean by “title”: if you mean heading then I am confused. If you mean something else, please explain.

In any case, if @Texfy’s solution works for you, that is fine. I merely wanted to present an alternate solution which I have been using for a couple of years (or whenever it came out) with great satisfaction because it works for me :grinning:

5

If I’m reading your snippet correctly (I haven’t tested it), it looks like you need to add a |n-h1 to target the heading to remove.

Texfy’s snippet doesn’t require anything extra, it will just remove the first heading of any transcluded note or section of a note.

6

Correct. Sometimes you have a section consisting of e.g. H1+text, H2+text, and H3+text. If you just want to remove e.g. H1 and H3 or just H3 you can use my 1st snippet by doing ![[note name|no-h1 no-h2]] etc.

In other words, my 1st snippet gives you more granular control.

OTOH, if you would want to remove all headings and just show the text then you’d do [[no name|no-h]], provided you have my 2nd snippet installed and enabled.

I always have both installed enabled.

Still, if Texfy’s snippet suits you better, use that.

1 Like
7

Hey, glad you could use and adapt it! I never have the note title in the note, I just use file names, so that could be the reason why it was different for you.

8

Thanks for sharing that snippet @Klaas! Slightly different use-case, but I love the idea of using the alt-text to control display behavior!

3 Likes
9

Hi, how should I modify this to work on mobile? I tried adding .is-mobile before .internal-embed but it seems CSS doesn’t work that way.

10

Just found this, and it fixed the thing that was bothering me. Displaying the title above in a tasteful way was a nice touch. Thanks for sharing, @Texfy!

2 Likes
11

I would love a way to use this with the Canvas, either with or without “narrow to section”

12

FWIW I’ve had to modify those CSS snippets as below in recent versions of Obsidian:

.internal-embed[alt*="no-h"] .markdown-embed-content h1,
.internal-embed[alt*="no-h"] .markdown-embed-content h2,
.internal-embed[alt*="no-h"] .markdown-embed-content h3,
.internal-embed[alt*="no-h"] .markdown-embed-content h4,
.internal-embed[alt*="no-h"] .markdown-embed-content h5,
.internal-embed[alt*="no-h"] .markdown-embed-content h6 {
    display: none;
}
13

My version works in the latest Obsidian versions too. Perhaps yours is needed for Reading mode? If so, it’s good you found a way to modify the code. I never use Reading mode anymore, I only use Live Preview and very occasionally Source mode.

1 Like
14

Hello,

So today, I’ve finally figured out how to do it properly, including making sure that only the first heading or the title are hidden, but other headings are still visible.

@Texfy : Is it possible conversely to only transclude the section ![[note#section]] but not what appears after this section?

Thank you!

15

Hello,

Is there any way to modify these so as to exclude the headings for transcluded items in a Kanban card? I’ve used your CSS snippet as you’ve incldued above; however, it doesn’t seem to work for me. :confused: For example, I’ve tried:

.internal-embed[alt*="no-h"].markdown-preview-view.kanban-plugin__markdown-preview-view h1,
.internal-embed[alt*="no-h"].markdown-preview-view.kanban-plugin__markdown-preview-view h2,
.internal-embed[alt*="no-h"].markdown-preview-view.kanban-plugin__markdown-preview-view h3,
.internal-embed[alt*="no-h"].markdown-preview-view.kanban-plugin__markdown-preview-view h4,
.internal-embed[alt*="no-h"].markdown-preview-view.kanban-plugin__markdown-preview-view h5,
.internal-embed[alt*="no-h"].markdown-preview-view.kanban-plugin__markdown-preview-view h6 {
    display: none;
}
16

I have tried all the CSS snippets above, with and without the alt-text link suffix, and it always includes the file.name above the intended transcluded body text.

To make sure its not the theme I am using, I reverted to default, but that still displays the filename too.

My Obsidian does not replicate the file.name in the body text as a heading. My Body text headings are all H2 and below. Never H1.

Am I missing something, or have Obsidian made changes to the core that has broken this workaround?