CSS for inline block references that works for both NEW CM6 Live Preview and also Preview Mode for both CM5 (Legacy) and CM6 (New)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --block-ref-line-color: #a337ff; /* #7159de (similar to Obsidian purple) */ | |
| --block-ref-line-type: solid; | |
| --block-ref-line-size: 2px; | |
| --block-ref-hover-bg-color: #d4d0d026; /* Set to "inherit" for no bg color */ | |
| } | |
| /* | |
| *************************************************** | |
| Live Preview (WYSIWYG Edit mode) inline block refs | |
| *************************************************** | |
| */ | |
| /* | |
| Styling the embed when the reference embed is on its own line (NOT inline) | |
| This was added due to recent update on 2022_02_18 to include children bullets | |
| */ | |
| div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > .markdown-embed, | |
| div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > .markdown-embed > div > .markdown-preview-view { | |
| padding: 0px; | |
| margin: 0px; | |
| } | |
| div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > .markdown-embed { | |
| border: none; | |
| border-radius: 0px; | |
| padding: 0px 25px 0px 0px; | |
| } | |
| div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed:not(.image-embed) { | |
| display: flex; | |
| padding: 0 2px 0 4px; | |
| } | |
| div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed p { | |
| margin: 0px; | |
| text-decoration: underline var(--block-ref-line-size) var(--block-ref-line-type) var(--block-ref-line-color); | |
| text-underline-position: under; | |
| } | |
| div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover p { | |
| background-color: var(--block-ref-hover-bg-color); | |
| } | |
| /* TWO OPTIONS... CHOOSE ONE BELOW BY COMMENTING OUT THE OTHER */ | |
| /* 1) WHEN YOU WANT THE BULLETS TO LOOK SIMILAR TO INLINE REFS WITH COLORED UNDERLINE UNDER EACH BULLET */ | |
| /**/ | |
| div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer { | |
| padding-bottom: unset !important; | |
| min-height: unset !important; | |
| } | |
| div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > .markdown-embed > div > .markdown-preview-view > .markdown-preview-sizer.markdown-preview-section > div > ul { | |
| margin: 0px; | |
| padding-left: 20px; | |
| } | |
| div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed li { | |
| margin: 0px; | |
| text-decoration: underline var(--block-ref-line-size) var(--block-ref-line-type) var(--block-ref-line-color); | |
| text-underline-position: under; | |
| } | |
| /**/ | |
| /* 2) WHEN YOU WANT THE BLOCK REFS ON THEIR OWN LINE TO LOOK MORE LIKE NATIVE EMBEDS BUT JUST LESS WASTED SPACE */ | |
| /* | |
| div.is-live-preview :not(.cm-line) > [src*="^"].internal-embed > .markdown-embed > div > .markdown-preview-view > .markdown-preview-sizer.markdown-preview-section > div > ul { | |
| border: 2px solid var(--background-modifier-border); | |
| border-radius: 10px; | |
| margin: 0px; | |
| padding: 10px 20px 10px 35px; | |
| } | |
| */ | |
| /* Removing the children bullets from inline block refs due to recent update 2022_02_18 */ | |
| div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li:not([data-line="0"]), | |
| div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li .list-collapse-indicator { | |
| display: none; | |
| } | |
| div.is-live-preview .cm-line > [src*="^"].internal-embed > div.markdown-embed { | |
| border: none; | |
| border-radius: 0px; | |
| } | |
| /* Set the styling of the line */ | |
| div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed p, | |
| div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed li { | |
| border-top: none; | |
| border-left: none; | |
| border-right: none; | |
| border-radius: 0px; | |
| border-bottom: var(--block-ref-line-size) var(--block-ref-line-type) var(--block-ref-line-color); | |
| padding: 0px; | |
| margin: 0px; | |
| padding-bottom: 2px; | |
| /* Using underline instead of border like TfTHacker prefers | |
| border: none; | |
| border-radius: unset; | |
| text-decoration-color: var(--block-ref-line-color); | |
| text-decoration-style: var(--block-ref-line-type); | |
| text-decoration-thickness: var(--block-ref-line-size); | |
| text-decoration-line: underline; | |
| text-underline-position: under; | |
| text-underline-offset: 2px; | |
| */ | |
| } | |
| div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed ol { | |
| padding: 0px; | |
| margin: 0px; | |
| } | |
| /* Need to slightly raise list items up or the border is hidden by the line below it (because of the padding-bottom: 2px added above) */ | |
| div.is-live-preview .cm-line.HyperMD-list-line [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed { | |
| bottom: 1px; | |
| } | |
| /* Remove margin and padding and set display inline... also remove bullets */ | |
| div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed), | |
| div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed, | |
| div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content, | |
| div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view, | |
| div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer, | |
| div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div, | |
| div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > p, | |
| div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > div, | |
| div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-content > div.markdown-preview-view > div.markdown-preview-section ul, | |
| div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer ul, | |
| div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li, | |
| div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li > div { | |
| display: inline; | |
| padding: 0px; | |
| margin: 0px; | |
| } | |
| div.is-live-preview [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > blockquote { | |
| display: inline-block; | |
| padding: 0px 0px 4px 5px; | |
| margin: 0px; | |
| border: 0 solid var(--interactive-accent); | |
| border-left-width: 7px; | |
| } | |
| /* Account for the extra space added on end of block reference text content (Licat needs to fix) */ | |
| div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) { | |
| /* Not going to apply this as Licat will fix eventually */ | |
| /*margin-right: -3px;*/ | |
| } | |
| /* Hide the block ref link unless hovered */ | |
| div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-link { | |
| display: none; | |
| color: transparent; | |
| top: 0px; | |
| left: 0px; | |
| right: unset; | |
| } | |
| /* Show the block ref link on hover */ | |
| div.is-live-preview [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover > div.markdown-embed-link { | |
| display: block; | |
| width: 90%; | |
| min-width: 150px; | |
| max-width: 90%; | |
| } | |
| div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover p, | |
| div.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover li { | |
| background-color: var(--block-ref-hover-bg-color); | |
| border-bottom-style: var(--block-ref-line-type); | |
| /* Using underline instead of border like TfTHacker prefers | |
| text-decoration-style: var(--block-ref-line-type); | |
| */ | |
| } | |
| /* Remove line breaks on multi-line block refs */ | |
| div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer br { | |
| /*display: none;*/ | |
| } | |
| div.is-live-preview .cm-line > [src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li input.task-list-item-checkbox { | |
| top: 0px; | |
| vertical-align: middle; | |
| z-index: 1; | |
| margin-left: revert; | |
| } | |
| /* For embeds of code blocks */ | |
| .markdown-source-view.mod-cm6.is-live-preview .cm-line > [src*="^"].internal-embed:not(.image-embed) > div.markdown-embed pre[class*="language-"] code { | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |
| /* | |
| *************************************************** | |
| PREVIEW MODE inline block refs | |
| Works for both CM5 (Legacy) and CM6 | |
| *************************************************** | |
| */ | |
| div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed { | |
| border-top: none; | |
| border-left: none; | |
| border-right: none; | |
| border-radius: 0px; | |
| border-bottom: var(--block-ref-line-size) var(--block-ref-line-type) var(--block-ref-line-color); | |
| padding: 0px; | |
| margin: 0px; | |
| padding-bottom: 2px; | |
| /* Using underline instead of border like TfTHacker prefers | |
| border: none; | |
| border-radius: unset; | |
| text-decoration-color: var(--block-ref-line-color); | |
| text-decoration-style: var(--block-ref-line-type); | |
| text-decoration-thickness: var(--block-ref-line-size); | |
| text-decoration-line: underline; | |
| text-underline-position: under; | |
| text-underline-offset: 2px; | |
| */ | |
| } | |
| div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed), | |
| div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed, | |
| div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content, | |
| div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view, | |
| div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer, | |
| div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div, | |
| div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > p, | |
| div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > div, | |
| div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer ul, | |
| div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li, | |
| div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li > div, | |
| div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-content > div.markdown-preview-view > div.markdown-preview-section ul { | |
| display: inline; | |
| padding: 0px; | |
| margin: 0px; | |
| } | |
| div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > blockquote { | |
| display: inline-block; | |
| padding: 0px; | |
| margin: 0px; | |
| padding-left: 5px; | |
| border-top: none; | |
| border-bottom: none; | |
| border-right: none; | |
| } | |
| /* Hide the block ref link unless hovered */ | |
| div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-link { | |
| display: none; | |
| color: transparent; | |
| top: 0px; | |
| left: 0px; | |
| right: unset; | |
| } | |
| /* Show the block ref link on hover */ | |
| div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover > div.markdown-embed-link { | |
| display: block; | |
| width: 100%; | |
| min-width: 150px; | |
| } | |
| div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover { | |
| background-color: var(--block-ref-hover-bg-color); | |
| border-bottom-style: var(--block-ref-line-type); | |
| /* Using underline instead of border like TfTHacker prefers | |
| text-decoration-style: var(--block-ref-line-type); | |
| */ | |
| } | |
| /* Remove line breaks on multi-line block refs */ | |
| div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer br { | |
| /*display: none;*/ | |
| } | |
| div.workspace-leaf-content > div.view-content > div > div.markdown-preview-view > div.markdown-preview-section span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li input.task-list-item-checkbox { | |
| z-index: 1; | |
| margin-left: revert; | |
| } |
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?
@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:
@that0n3guy please see my reply to your question in Discord here: https://discord.com/channels/686053708261228577/702656734631821413/929243625903230996
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).
Further update after figuring out how to do it without needing the |children alias added.
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:
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Here is link to the original Preview Mode CSS for inline block references: https://gist.github.com/GitMurf/bb68e9f48556b80d9a694eb0fd1742fe