Headerless Transclusions

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


in another file:

That’s it, have fun!

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

15 Likes

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.

4 Likes

@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.

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:

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.

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.

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.

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

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.

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!