Macros and Commands - let's share

General
4

I am brand new to macro and commands. But I really wanted status labels and this post helped me achieve that.

  • {{pill grey,inactive}} {{pill blue,info}} {{pill green,success}} {{pill yellow,warning}} {{pill red,important}}
  • image

config.edn

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

 :commands [
    ["pill-red" [[:editor/input "{{pill red,}}" {:backward-pos 2}]]]
    ["pill-yellow" [[:editor/input "{{pill yellow,}}" {:backward-pos 2}]]]
    ["pill-blue" [[:editor/input "{{pill blue,}}" {:backward-pos 2}]]]
    ["pill-green" [[:editor/input "{{pill green,}}" {:backward-pos 2}]]]
    ["pill-grey" [[:editor/input "{{pill grey,}}" {:backward-pos 2}]]]
 ]

custom.css

html[data-theme=dark] {
  --red: #cb4b16;
  --orange: #ffb86c;
  --yellow: #b58902;
  --blue:#656aa4;
  --green: #219d85;
  --grey: #586e75;
}

span.pill {
  border-radius: var(--ls-border-radius-low);
  background-color: var(--ls-page-inline-code-bg-color);
  border: 1px solid;
  padding-left: 0.3em;
  padding-right: 0.3em;
}

span.pill-red {
  border-color: var(--red);
  color: var(--red);
}

span.pill-yellow {
  border-color: var(--yellow);
  color: var(--yellow);
}

span.pill-blue {
  border-color: var(--blue);
  color: var(--blue);
}

span.pill-green {
  border-color: var(--green);
  color: var(--green);
}

span.pill-grey {
  border-color: var(--grey);
  color: var(--grey);
}

span.inline div {
  display:inline;
}

Note: The last rule for span.inline div is because Logseq will wrap the macros in divs that are blocks, otherwise forcing each label onto a new line.

The following are things I learnt that others who are new to this might benefit from.

  • You can press Ctrl + Shift + I to open an inspector that lets you examine how Logseq is rendering your macro.
  • To define multiple macros, put each on a new line – coming from PHP, this is a strange format to me :slight_smile:
  • The :backward-pos value in the command tells Logseq where to position the cursor after selecting the command.

What I still don’t know is if there is a difference between the using two or three pairs of { to wrap a macro. I.e. {{macro}} vs {{{macro}}}

14 Likes