Display Banners in Live Preview

[DryIce1]

What

• If in Preview Mode, Banners are displayed perfectly
• I look forward to seeing Banners also displayed during Live Preview mode.

No rush! But thanks for your awesome plugin!

[RyzenFromFire]

Just found this plugin, this would be a great feature to have.

[shekhag-zz]

Love this plugin 💖and looking forward to seeing this in action in live preview mode. Thanks.

[noatpad]

Hey there! Pardon the late check on this, but I wanna say that this is like high priority on the roadmap, & I'm currently looking into it (it's just been a challenge to figure out how CM6 Extensions as a whole personally, ahah).

There's a release later coming today that doesn't include this, 'cause I wanted to get through some older issues/suggestions first, but this is being worked on (or rather, being figured out. If anyone has references of other plugins that uses this type of stuff, feel free to throw me any, haha)

[DryIce1]

Hi @noatpad, thanks for the update! Unfortunately I haven't got any programming background and haven't ever stepped into the obsidian plugin developer discord channel, so I can't contribute any knowledge here. Best best best of luck!

[RyzenFromFire]

I'm using this with a few plugins - specifically Folder Note and Admonitions come to mind. Both of those plugins use codeblocks to generate their features, which I believe would then be passed to Obsidian itself for Live Preview. So I doubt that helps much, but it's what I could think of.

[ocreturner]

@noatpad i think nothingislost from discord can help you since he has banners working with codemirroroptions. after you figure how he did it then you can make it work with cm6 for livepreview

[wismie]

If I can chime in, I would definitely like to see this working in LP too :)

[megclaypool]

I just found this plugin today, and I'm now super excited to see it working in live preview 🙂 Thanks for all your hard work! ❤️

[nousernameavailableanymore]

+1 for making this available in live preview

[noatpad]

About time I got this working. Should be able to push preliminary support for live preview later today or tomorrow

[anvimea]

Awesome, really excited to see banners in live preview. Testament to how great the plugin is that I've been hungering so much for it to work in editing mode!

[noatpad]

Preliminary support's up and ready to go! Pardon me that this took way longer than I'd like to admit, ahah.
Go wild, fellas. https://github.com/noatpad/obsidian-banners/releases/tag/1.3.1

[DryIce1]

@noatpad thank you so much! It looks great! Thanks again 👌💪👊

Even if it did take you longer than you had planned, was it difficult? Would any of the code be relevant for the metatable plugin, because they might be interested in any tips and tricks you've learned along the way getting YAML to play with live preview.

Edit: With some help from discord, I was able to get a much cleaner appearance with live preview. I discovered you can hide/disable the YAML frontmatter in live preview with the following snippet and by using a hotkey set up with the Snippets Command plugin to quickly switch the YAML on/off.

.is-live-preview .cm-hmd-frontmatter {
    display: none;
}

[megclaypool]

This is fantastic -- thank you so much for your hard work!!!

[DryIce1]

Hi @noatpad, I had a few style problems that I wanted to iron out so the Banners looked nicer, and I think I have good functional solutions for each of them. Could I ask you to have a quick look at the code below and make sure it's OK? Thanks!

Before (problems):

• large space before the beginning of the text
• YAML takes up a large amount of space
• The embedded note titles plugin is completely covered over by the banner
  

After (looking good!):

• install Snippets Commands Plugin and assign hotkey (I use CTR + Y) to turn on/off the snippet below (ie hide/reveal YAML).
  

thoughts and questions

1. Remove YAML in live preview - SOLVED ✔️ see snippet below. Note: the YAML is still there and can be edited even if it can't be seen!
2. Move the beginning of my editable text up - ✔️ I targetted the banner spacer and turned it off (display: none). Is that OK or is it used for something important?
3. Using the plugin embedded note title, I wanted to move the embedded note title to the lower edge of the banner, so that it overlaps with the gradient of the banner. ✔️ - I think it is a neat little calculation, and it looks good.

the snippets

/* ====== Hide YAML in LP ======== */
.is-live-preview .cm-hmd-frontmatter {
    display: none;
}

/* ====== Make the start of the text editor immediately after the banner by not displaying the banner spacer AND displaying banner icon as inline-block ======== */
.is-live-preview .obsidian-banner-spacer {
    display: none;
}
.is-live-preview .obsidian-banner-icon {
    display: inline-block;
}
/* ====== On my mobile, the banner spacer needs to be turned ON and repositioned up -50px ======== */
.is-mobile .obsidian-banner-spacer {
    display: block;
    margin-top: -50px;
}

/* ====== Move the Embedded Note Title down to the lower portion of the banner, overlying the banner faded gradient ======== */
.is-live-preview h1.cm-line.embedded-note-title{
  margin-top: calc(var(--banner-height) - 50px);
}

edit: added .is-mobile banner spacer snippet to above.
edit: added banner icon adjustment
Ediy: added snippets command plugin idea.

[DryIce1]

Unfortunately, the big space came back when I tried inserting icons.

I'll try finding the solution for this later.

Edit: fixed this with the banner icon adjustment mentioned in above post.

[megclaypool]

@DryIce1 , how do you edit your YAML frontmatter if it's set to display: none?

[DryIce1]

Hi @megclaypool, good question! Snippets Commands plugin to assign hotkey and hide/reveal YAML. I've edited my post above to include this step, thanks.

[TenviLi]

Unfortunately, the big space came back when I tried inserting icons. I'll try finding the solution for this later.

Edit: fixed this with the banner icon adjustment mentioned in above post.

wow, looks so beautiful

[issam-seghir]

I have the same problem here !!