A proposal for rendering block references inline

[gruts]

If we want a block reference to be on its own line, then we can make a new line.

How would we distinguish the two with css styling if a block embed is simply an inline embed on its own line? I currently have a border round all my block embeds (to make it clear they’re embeds). I would want to keep these borders under the proposed new system, but I would not want borders around inline embeds.

Wouldn’t it be simpler to have two types of embed, one for blocks and one for inline, each using a different leading symbol? e.g.
![[Block embed]]
@[[Inline embed]]

[TfTHacker]

This is an interesting question. While content can be inline or on its own line, there is only one style of formatting. So if you want different visual effects depending on the type of embed, then this is an interesting idea.

However just curious, this is for debate To me transclusion is about bring the content into its new place and wrapping formatting around it. For example could you not drop a block embed into a > quote if you want it highlighted in a special way? (I don’t know the answer)

[welstand]

Great idea!

[NothingIsLost]

The CodeMirror Options plugin handles this use case by treating block refs differently depending on whether they are referenced inline or on a line by themselves.

A block ref placed inline gets treated as a marked span by the parser. A block ref placed at the start of a line, with nothing after it, gets treated as a full line widget. The two different options each have their own classes that allow you to differentiate the styling.

Page and header refs both get treated as full line widgets, despite where they are placed on a line.

[smurfman111]

Here is an example in the new Live Preview (WYSIWYG) with first showing what it looks like by default without any CSS styling and all block reference embeds on their own lines.

It requires two screenshots to cover all my examples:

And here is what it looks like with custom CSS to try and make the block references render inline. This is what TfTHacker is hoping would be more native/default to Obsidian instead of requiring a ton of CSS. This is the EXACT same page as above. Only requires one screenshot because of all the space saved with the block refs rendering inline.

Here is my custom CSS for these inline block references: CSS for inline block references that works for both NEW CM6 Live Preview and also Preview Mode for both CM5 (Legacy) and CM6 (New) · GitHub

[Klaas]

@NothingIsLost : CodeMirror Options shows a block reference on a line by itself as an indented block with a border around it. So, visually it stands out from the host text. If I understand @TfTHacker’s proposal it is to make a block reference integrated into the host text so it does not stand out (like a sore thumb, for me), albeit with a discrete marker to indicate it is a transclusion.

BTW, I do appreciate CodeMirror Options and use it. I am transitioning over to Live Preview, so hopefully CMO will be amended.

[NothingIsLost]

Klaas, I appreciate you trying to help but I’m aware of the use case and how the plugin works.

I’m not suggesting anyone use CodeMirror Options as a solution to this FR, merely suggesting an option for conditional handling of inline block refs based on their location on the line.

I plan on adopting whatever Obsidian ends up going with so that people who can’t migrate off of CM5 still have a Live Preview option that matches as closely as possible with the CM6 version.

[gruts]

Dropping a block embed into a > quote doesn’t work for me for two reasons:

1. It’s a kludge… Why should users have to put a block inside a blockquote to indicate it’s a block? The present arrangement is far more intuitive.

2. What happens if the user wants to include an inline embed inside a blockquote? How would you tell the two apart?

It’s possible the programmers might be able to detect when an embed is the only thing on a line and wrap a <div class=“block-embed”> (for example) around it, but there are other complications. e.g. What if the user writes the following?

![[Embedded note]] ^reference

I still think having a different leading symbol to indicate an inline embed is the simplest answer—but, personally, I don’t have any problem with the current arrangement.

[demeneer]

I also support this FR, we may even be able to differentiate block and span style embeds using the ! / @ syntax as proposed here.

Ideally, preferred symbols would even be customisable.

[shabegom]

Please no changing embed syntax. Handle as @NothingIsLost suggested: be aware of inline and own line and use span or div accordingly. I don’t want to have to remember @ embeds and ! embeds etc. If this is adopted it should be backwards compatible with all my lovely own-line embeds. I don’t really use inline embeds ever, so wouldn’t benefit from this change, but would be annoyed if my existing embeds broke.

[demeneer]

I would rather see it as a (shorthand) addition rather than a replacement as well.

[cansar]

+1 I also support this proposal. I use custom CSS to get this effect, but it would be wonderful to have it working across themes.

[Kabo]

A common use case for me is to connect quotes from literature notes to a text that I am writing, such as this:

The CSS snippet I have makes this look great and fluid, and I can still go back to the original note to check on the context of the quote. Without the kind of inline embeds @TfTHacker proposes, it looks like this:

It makes it very unpleasant to read (let alone export). Even if it was a block quote I would much prefer a minimal version.

I think inline embeds would just add functionality, rather than take away anything from existing usage, and consistency across themes and modes (without having to rely on css snippets) would be great!

[heumed]

Plus one - this would be a game changer for using obsidian for grant writing, since a lot of verbiage is repeated in several places in the proposal.

I wasn’t aware in-line embedding is available in other PKMs - this is the type of differentiator that would make me consider changing platforms.

[Klaas]

@Kabo : with what CSS code do you you achieve inline embeds? I only the “out-of-line” ones because I don’t how to achieve inline. Of course, I could wait till TfTHackers plug-in is there.

[Kabo]

it’s the snippet from @smurfman111 ( I just changed the colour…)

[Klaas]

@Kabo thanks, I missed it when I read his comment.

[Kabo]

No worries!

[brimwats]

+1 for this idea