CSS for inline block references that works for both NEW CM6 Live Preview and als...

Author

Here is link to the original Preview Mode CSS for inline block references: https://gist.github.com/GitMurf/bb68e9f48556b80d9a694eb0fd1742fe

Author

Here is what it looks like after recent changes (the item that says "Open Link" is what it looks like when being hovered by the mouse):

This is fantastic, what a joy to see/not see those block references like that.

I have a related question: I have a number of old references to headers (I try to avoid those now), which means all the text below the headers down to the next header is shown in the transclusion. In Live Preview that transclusion is out of line vertically with the host text, has a rim around it, a scrollbar, a link icon, and big gaps above and below. This is how I cope with that:

/* eliminate scrollbars, borders, and vertically align */

.markdown-embed, .markdown-embed-content.node-insert-event  { /* CM6; the above is CM5 */
  max-height: unset;
  border: none !important;
  margin-left: -1.2rem !important; /* for Live Preview; in Preview: -0.5rem */
  margin-bottom: -2rem !important;
  margin-top: 0rem !important;
}


/* hide link icon */
.markdown-embed-link svg {
  opacity: 0;
}

/* show link icon on hover */
.markdown-embed:hover svg {
  opacity: 1;
}

The margin-left interferes with your code, so I commented it out. Is there a way to fix the vertical misalignment in any other way without it affecting your code?

Author

@DutchPete the following should work. The key is adding span:not([src*="^"]) > in front of the .markdown-embed selector.

span:not([src*="^"]) > .markdown-embed, span:not([src*="^"]) > .markdown-embed .markdown-embed-content.node-insert-event  { /* CM6; the above is CM5 */
  max-height: unset;
  border: none !important;
  margin-left: -1.2rem !important; /* for Live Preview; in Preview: -0.5rem */
  margin-bottom: -2rem !important;
  margin-top: 0rem !important;
}

/* hide link icon */
span:not([src*="^"]) > .markdown-embed .markdown-embed-link svg {
  opacity: 0;
}

/* show link icon on hover */
span:not([src*="^"]) > .markdown-embed:hover svg {
  opacity: 1;
}

Hi, this is amazing!

However, the code could not render tables properly (there will be a small rectangular on the upper left corner when hovering). Is there a way to fix this? Maybe make it transparent or something? I'm not an expert in css :(

Multi-lined bulleted embeds don't work well with this:

Author

I came up with a way that can keep my standard inline block referencing as default including hiding the new children list item / bullet feature (will hide the children).... but then ALSO allow for you to have a regular embed to bring in children list items if you want by simply adding |children as an alias to the block ref embed link (see screenshot).

Author

Further update after figuring out how to do it without needing the |children alias added.

Author

Choose between the following two options for how a list with children item show when block reference embed is on its own line (not inline with other text). You must un-comment one section and comment out the other.

OPTION 1 from line 41

OPTION 2 from line 58:

Thank you for the plugin!

I have a small wish that, when I apply this to my theme, I wish I could highlight inline reference blocks - currently, the highlights disappear on the inline blocks.

Can you please help me make the embed wider? I'd like to have it stretched full width. Currently, it occupies only 60% of the width, I would say.

Author

Can you please help me make the embed wider? I'd like to have it stretched full width. Currently, it occupies only 60% of the width, I would say.

Please provide more details with screenshots so I can try to help. Thanks.

Hello! Thanks very much for a great snippet - this is doing exactly what I wanted! The only issue I'm currently coming across is what I've included a screen shot of.

On line 1, I have a task that's been written into this document. Line 2 is an embed task from another document, but the information in that embedded line has its own new line constraints. You can see that line 3, which contains another local task, extends past the embed in line 2.

Is there any way to adjust the width of the embedded item? Thanks!

Author

@jjesskalee can you please try without any theme? I believe this is a theme issue or another css snippet because I don’t have this problem with vanilla default theme.

Hi great CSS code that add great feature to the app.

I need your help with this (and please bear with me bc I'm a noob). I've spend a whole day messing around and even with your detailed annotation in the code I still can't do what I want:

This is currently my set up in Logseq. There are 2 things that I like:

• Block reference are inline, no matter if it's a reference within another reference. (I make text brown so that I know it's a block ref).
• I have a "^" at the end of block ref to indicate that it's a block ref. This helps me to know that there is a block ref within a block ref.

• In Obsidian, block ref within block ref breaks line in Preview Mode (but not Reading Mode) -> Please help make the line not broken if I have block ref within block ref.
• I can't seem to add "^" at the end of the block ref using the syntax I have in Logseq even when I was able to identify the block ref in Obsidian (using Ctrl Shift I) and was able to change the color of the block ref. Please help me add "^" at the end of the block ref.

This is what I meant
In reading mode: Line is not broken

In Preview mode line is broken