Macro for inline HTML is rendered as block

Questions & Help
1

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)

2 Likes
2

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

3

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.)

4

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
5

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.

3 Likes
6

Hi all, my first post here…

Thanks for opening my eyes to Ctrl-Shift-I too! @blork

I had a few side effects (mostly with referenced blocks being rendered inline), so I wanted to share my attempt at this.

As of Logseq 0.9.4, it looks like there is now a class and attribute on the outer div allowing us to make this a bit more robust.

Given a config containing something like,

:macros {
  "foo" "<i class=\"icon\"></i>[$1](https://example.com/$1)"
}

and some text like:

Some text before {{foo bar}} and after.

The inspector shows:

<span class="inline">
  Some text before
  <div data-macro-name="foo" class="macro">
    <div class="raw_html">
      <i class="icon"></i>
    </div>
    <div class="is-paragraph">
      <a href="https://example.com/bar" target="_blank" class="external-link">bar</a>
    </div>
  </div>
  and after.
</span>

I was therefore able to target just this macro and its contained divs with:

span.inline > div.macro[data-macro-name="foo"],
span.inline > div.macro[data-macro-name="foo"] div
{
  display: inline-block;
}

i.icon {
  background-image: ...
  ...
}

Hope that helps someone else out too.

Cheers,
Ian

7

In case you want to render all macros inline, here is a simple solution:

.macro, .macro .raw_html {
  display: inline;
}