Stealth embed and embed options

Custom CSS & Theme Design
1

Use case or problem

When I embed a note, I want options of how they get embedded. There should especially be the option to embed notes stealthily. Stealth embed.

Proposed solution

There are three categories of embed that I can think of:

  1. Normal embed. This is the current state. Embedded notes have indent and title visible.

  2. Stealth embed. Notes or topics are hidden. No title of the note is seen, and if a heading is embedded (using #) then the heading is not seen either; child headings will be seen though. But if there are no child headings, then the note should merge seamlessly with a line or paragraph. The naked-embed css solutions don’t quite cut it. Users in read-mode should not know that a note is embedded into a line.

  3. Hybrid embed. Here users will know that it is an embed but not see the title of the note or heading.

Current workaround (optional)

I tried various versions of naked-embed solutions, but none of them worked.

3 Likes
2
3

Thank you! But how do I apply this?

4

If you are using the ITS theme, it’s built in. :tada:

For the default or other themes, you can download the .css file, save it in your snippets folder, and enable it as a CSS snippet:

5

Ok that didn’t work. But I used chatgpt and got this far:

/* Remove the visual separator and indent from embedded content */
.markdown-embed-content {
  border: none !important; /* Removes borders */
  padding: 0 !important; /* Removes padding */
  margin: 0 !important; /* Removes margin */
}

/* Attempt to make embedded content display inline */
.markdown-embed {
  display: inline !important; /* Changes embeds to inline display */
  margin: 0 !important; /* Removes margin around embeds */
}

/* Hide all headings within embedded notes */
.markdown-embed h1, .markdown-embed h2, .markdown-embed h3,
.markdown-embed h4, .markdown-embed h5, .markdown-embed h6 {
  display: none !important;
}

/* Additional styling to attempt to force inline behavior */
.markdown-embed-link, .internal-embed {
  display: inline-block !important; /* Makes the embed link and container inline-block */
  margin: 0 !important; /* Removes margin */
  padding: 0 !important; /* Removes padding */
}

/* Remove specific styling that may cause separation */
.markdown-preview-view .markdown-embed, .markdown-preview-section .internal-embed {
  border: none !important; /* Ensures no border is applied */
  box-shadow: none !important; /* Removes box shadow if any */
}

But I still see the purple line and the embed goes to the next line even though I gave no line break. I want it to blend seamlessly with the sentence that I put the embed in.

Is that possible?

I tried ITS, with and without the chatgpt script, but i’m stuck at the same place

6

chatgpt hallucinates nonsense, so there’s that to consider.

4 Likes
7

the above code it spat out worked except for the purple line and pushing the embed to the next line.

any idea how I can remove the purple line and get the content to blend seamlessly with the line that I insert the embed on?

8

Adding this anywhere should remove the left vertical line:

body {
    --embed-border-left: unset;
}

The default is: --embed-border-left: 2px solid var(--interactive-accent)

UPDATE: from Obsidian v1.6+ on, the --embed-border-left property/variable is now --embed-border-start. The default is:

  --embed-border-start: 2px solid var(--interactive-accent);
9

Thank you very much! That worked.

Can you also please help with the code for blending the embed with the line that I insert it in?

10

So, I’m currently using this:

/* Hide all headings within embedded notes */
.markdown-embed h0, .markdown-embed h1, .markdown-embed h2, .markdown-embed h3,
.markdown-embed h4, .markdown-embed h5, .markdown-embed h6 {
  display: none !important;
}

/* Additional styling to attempt to force inline behavior */
.markdown-embed-link, .internal-embed {
  display: inline-block !important; /* Makes the embed link and container inline-block */
  margin: 0 !important; /* Removes margin */
  padding: 0 !important; /* Removes padding */
}


/* Remove purple line */

body {
    --embed-border-left: unset;
}

But this doesn’t hide the title.

I’ve noticed it hides the title only when there’s a “#”. For example "![[note-embed#heading]] hides the heading and the title, but "![[note-embed]] on its doesn’t hide the title.

Can someone please help?

11

You could try adding this to the CSS you already have:

.internal-embed .markdown-embed-title {
    display: none;
}
12

That worked like a charm! Thank you!

There’s one last thing I’m not finding an answer to though.

Would you know how I can get the embed to fit at the end of the sentence such that you can’t tell when the sentence ends and when the embed begins?

Is that even a possibility?

13

Do you mean like:

“Here is some text and here is the embed.”

or “Here is some text, here's the embed, and here’s some more text.”

but you don’t know it’s an embed? If so, I’ve seen those called inline block references. There was some very complicated CSS a while ago that could handle those, but it broke along the way, unfortunately.

You could look into Dataview’s inline JS queries, but that’s entirely different animal and workflow.

Screenshot 2024-03-08 143747

14

That first example is what I’m referring to.

Second one is too complicated, and not needed.

Is there a simple css trick for the first one?

Also, I LOVE how you described the example. Simple but elegant

15

I had a look again at the inline block references CSS that I used a while ago, and it’s unfortunately not working.

here is some text ^e220c2


text before > ![[#^e220c2]]

Screenshot 2024-03-11 at 18.00.15

Hopefully someone can have a crack at it.

16

And there’s one other thing that I noticed.

If my embed has bullet points, the indent happens (the embed is distinguishable)

Is it possible to make notes that have bullet points not look like an embed?

17

Here’s the code I just made to get a clean embed:

.internal-embed .markdown-embed-title {
	display: none;
}

.internal-embed {
	border: none;
	padding: 0px;
}

.internal-embed .markdown-embed-link {
	display: none;
}
2 Likes
18

This is great! I’m still trying to get out the empty space under the embed.
You could also play around with adding this code, which was written by @zamsyt#4459 on discord.
But it makes bullets and indents disappear. I don’t understand enough to modify it.



:is(li, .HyperMD-list-line) > .internal-embed[alt*='^'] {
  display: inline-block;
  vertical-align: top;  
}

.internal-embed[alt*='^'] :is(p, ul, li) {
  margin: 0;   
  padding: 1;  
}
19

I’m sure Zam has a use case for it, but the bullets and indents disappearing are from the margin: 0 here. It’s removing top-right-bottom-left margins and compressing all p, ul, li elements.

.internal-embed[alt*='^'] :is(p, ul, li) {
  margin: 0; /* <-here */   
  padding: 1;  
}
20

how would you rewrite it to keep the cropped white space, but not hide bullets and indents?