Macro for inline HTML is rendered as block

I have defined the following macro for statuspill/badge effect, but it does not render as an inline value.

:macros {
     "pill" "<span class=\"pill pill-$1\">$2</span>"
 }

This is how I’m using the macro.

foo {{{pill red,bar}}} baz {{{pill blue,qux}}}

And this is how it renders.

image

What I would like is for it render on a single line – is there a trick to achieve this?

(Note that I’m using Logseq version 0.8.8)

1 Like

I’m not sure, but I would try adding something like style=display: inline; to the macro

Thanks for the suggestion. I had tried that, but no joy.

I don’t know how to inspect what HTML Logseq is producing within my own Logseq instance.

But I found that the live demo of logseq let’s set macros and tests. This is the HTML it is producing.

<div class="flex-1"><span class="inline">foo <div><div class="raw_html"><span class="pill pill-red">bar</span></div></div> baz <div><div class="raw_html"><span class="pill pill-blue">qux</span></div></div></span></div>

The two divs, <div><div class="raw_html"> are each display: block, which is why they are each rendered on a new line.

If I set the bullet value to foo <span class="pill pill-red">bar</span> baz <span class="pill pill-blue">qux</span> (instead of using my macros) it renders as the following:

<div class="flex-1"><span class="inline">foo <span><span class="pill pill-red">bar</span></span> baz <span><span class="pill pill-blue">qux</span></span></span></div>

So macros are being rendered between DIVs, with an div.raw_html where the macro contains HTML.

If anyone thinks this is not deliberate, I would be happy to raise a bug.

(I should note that the live demo of logseq us version 0.6.3, which explains other differences in rendering when I perform this test in my 0.8.8 version.)

Logseq for desktop is an Electron app, which is basically a browser app. Right-clicking to open developer tools doesn’t work, but you can use ctrl/cmd-shift-i to inspect the code with devtools.

If adding it to the inline html isn’t working, try adding the tweak to custom.css either targeting the .pill element or any .raw_html element, and consider the !important tag (ie, display:inline !important; if it still doesn’t work.

2 Likes

but you can use ctrl/cmd-shift-i to inspect the code with devtools.

Excellent! You just saved me so much time :smile: I had wondered if there was such an option, but could not find any details.

try adding the tweak to custom.css either targeting the .pill element or any .raw_html element

:+1: Now I can clearly see the HTML that the macro output is enclosed in, I have used the following CSS to make the enclosing divs inline where they appear within an inline span.

span.inline div {
  display:inline;
}

I’m not sure yet if there may be unwanted side effects to this.

1 Like