Godsend this, thank you works a treat!!!
Hi! Do you still need a solution for this?
If yes, Iāve found that you can hide ALL scrollbars (including in hover previews) using a plugin called Hider.
It also allows to hide other stuff but you can choose what to hide (although, if you toggle āhide scrollbarsā it will hide ALL of them throughout the whole app - I personally like it this way but it may be a con for some people).
Hope this helps!
Hey, thanks for the awesome css snippet, the overly large block references were a bit distracting!
I was also wondering if I can assign a different background color to the embed. That could give it a slightly better cue where the block starts and ends. Currently, it is a bit hard to notice where the block reference is by only looking at the link symbol.
For all that read this late (the original post is a long time ago):
Thanks very much, your posts were very helpful! (Also showing the link icon only on hover is neat). For everyone else wondering how itās done, just add the following to the CSS snippet:
/* change background color, to exactly see whatās embedded */
.markdown-preview-view .markdown-embed,
.markdown-preview-view .file-embed {
background-color: var(--background-secondary) !important;
}
Sorry for being late to the show (the last post was in April, tho), but why open up a new thread, if this one was right on topic
Iāve been trying this out, and of the flush inline options it seems to be the best. However, Iāve having an issue with newlines inside embeds being removed, as well as those between embeds. Iām not great with CSS, but I know the issue is under /* remove <br> between internal embeds */
. Any ideas?
With that portion commented out:
With normal css:
Source for embed:
Edit: the same issues seems to apply to the preview on hovering.
Hi Iām having a few problems, I donāt think this is really working for me. There is still a lot of space on the bottom of the block reference:
This is the referenced Note
Any ideas?
Updated for the new default theme:
/* Display embedded notes in line with other block elements */
/* Remove the embed heading */
.embed-title {
display:none;
}
/* Align embed text with normal text */
.markdown-embed {
padding-left: 0px;
border-left: none;
}
/* Highlight the entire embed when hovering */
/* NOTE: Tested approaches to highlight the embed only when hovering
* over the embed link. These conflicted with other styles and mouse
* events. I opted for the simpler approach and kept it subtle. */
.markdown-embed:hover {
backdrop-filter: invert(1%);
box-shadow: 0 0 1px 3px rgba(136, 136, 136, 0.1);
}
Thanks for this !
Very nice. Iāve been looking for a good balance between āseamfulā and seamless. I like to know that Iām looking at an embed, but not want that to be distracting. Ideally, I would like for the embed to be structurally seamless ā i.e., the text sits where it is supposed to, not offset or padded or wrapped differently, etc., but with subtle yet clear visual cues that it is embed. And it would be nice to see the path to the file on, e.g., hover. This snippet helps a lot in giving me a good starting place for all this
You can also try this, works well with the above:
/* Code kindly provided by @zamsyt#4459 on discord */
:is(li, .HyperMD-list-line) > .internal-embed[alt*='^'] {
display: inline-block;
vertical-align: middle;
}
.internal-embed[alt*='^'] :is(p, ul, li) {
margin: 0; /* This makes spacing top, bottom, and between list items */
padding: 0.5; /* Putting this on 0 makes checkboxes and bullets disappear (?) */
}
.internal-embed[alt*='^'] .markdown-embed {
padding: 0; /* This doesnt do anything */
}
.internal-embed[alt*='^'] + :is(br, img.cm-widgetBuffer) {
display: none; /* Don't know what this does */
}
.internal-embed[alt*='^'] .markdown-embed-link {
display: none; /* This hides the link symbol */
right: -1px; /* Increasing the number makes the link symbol disappear in the right border */
}
To make all embedded reference except for images inline
.internal-embed/* [alt*='^'] */:not(.image-embed) {
display: inline-block;
vertical-align: middle;
}
I added the following to look as āinlineā as possible.
.markdown-preview-sizer {
min-height: 0px !important;
}