The current block references stand out as big alien chunks in any document. It’d be better if they felt as if they were part of the document, or at least to have the option to achieve that. If I have inline embeds, then a synthesis of different ideas can be put together without forcing a shape like current embeds do.
This request can be better placed in context by looking at this comment in a different thread.
+1 this request for users that create very atomic notes. This may end up as a plugin though.
this is possible via css right now, I think under naked embeds
I have taken a dig at this. Check this out 
I, also, would like to see this feature added, perhaps as a formatting toggle (current form v. minimal form).
I need this feature.
I have to link my todo item when scheduling today’s task list.
the block embedding totally destroy my list and hard to preview.
Now this feature can be achieved with Murf’s css
/* INLINE BLOCK REFS */
:root {
--block-ref-color: yellow;
--block-ref-link-color: transparent;
}
.markdown-preview-view span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed {
border-top: none;
border-bottom-color: var(--block-ref-color);
border-bottom-style: dashed;
padding: 0px;
margin: 0px;
}
.markdown-preview-view span[src*="^"].internal-embed:not(.image-embed),
.markdown-preview-view span[src*="^"].internal-embed > .markdown-embed,
.markdown-preview-view span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content,
.markdown-preview-view span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view,
.markdown-preview-view span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer,
.markdown-preview-view span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div,
.markdown-preview-view span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > p,
.markdown-preview-view span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > div {
display: inline;
padding: 0px !important;
margin: 0px !important;
}
/* Convert bullet list block refs inline (remove the bullet) */
.markdown-preview-view span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer ul,
.markdown-preview-view span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li,
.markdown-preview-view span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li > div {
display: inline;
}
.markdown-preview-view span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-content > div.markdown-preview-view > div.markdown-preview-section ul {
padding: 0px !important;
margin: 0px !important;
}
/* Hide the block ref link unless hovered */
.markdown-preview-view span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-link {
display: none;
color: var(--block-ref-link-color);
top: 0px;
left: 20px;
}
/* Show the block ref link on hover */
.markdown-preview-view span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover > div.markdown-embed-link {
display: block;
}
.markdown-preview-view span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover {
border-bottom-style: solid;
}
.markdown-preview-view span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-content > div.markdown-preview-view > div.markdown-preview-section {
min-height: 0px !important;
}
/* Remove line breaks on multi-line block refs */
.markdown-preview-view span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer br {
/*display: none;*/
}
Was going to suggest exactly this. Yes, this would be great. I currently use the notes refactor plugin a lot, and the result tends to be quite ugly when I chop a larger note into smaller ones. That is especially the case when an embedded note renders at its maximum size, with the text within becoming scrollable.
To avoid this problem, I create copies of the sub-headings as separate notes instead of embedding them. I would have preferred to be able to embed them in-line as OP suggested.
Some form of this would be really great. Unfortunately, I haven’t been able to get any of the css hacks working yet.
@jokysatria: I just discovered your code, and am very happy to see it works like a dream ! Many thanks.
For regular embeds, I have this:
/* lift embed on hover */
.internal-embed .markdown-embed:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
transform: translate3d(0px, -3px, 0px);
}
Is there a way to integrate this into your code ?
I’m sorry, I don’t know more about CSS. I just shared someone work ._.
See A proposal for rendering block references inline - #58 by syncretizm for further discussion
Maybe things have changed in last years…
New to Obsidian I searched for a solution to this within a week.
So I tried the Murf’ code in this thread, but when toggling from edit to view mode,
the little backlink icon jumps to the previous paragraph with a tiny colored seam at the end of its text. Same thing with default theme and other themes.
After experimenting, made another solution using two files;
File: embed-link-inline-clean.css : always ON
/*
Admonition Container [ Inline Content Container ]
Arranges the admonition type of indent with vert bar in front; turn it off.
*/
.internal-embed {
padding-left: 0px; /* Same as all other content */
border-left: unset; /* Remove the left vert admon bar */
background-color: unset;
}
/*
Inline Content Container [ Inline Content + Link Symbol ]
Not necessary actually, but used a bg color to figure out what is what
*/
.markdown-embed-content {
background-color: unset;
}
/*
Link Icon; at far right.
Keep 'visible' in composing mode.
Use embed-link-inline-clean_no-icon.css to hide it.
*/
.markdown-embed-link {
visibility: visible;
}
File: embed-link-inline-clean_no-icon.css: ON to hide the link icon
/*
Hides the...
Link Icon; at far right.
That is visible inside...
embed-link-inline-clean.css
*/
.markdown-embed-link {
visibility: hidden;
}