Custom tags rendering with Emojis

I often would like to use emoji tags with backlinks lke #[[⭐️]] to highlight blocks. However, they are not visually outstanding at a glance:

image

To make the tags more attractive, I did some tricks to

  • use #star instead of #[[⭐️]] to make it a bit easier to type
  • give it a red background & shadow
  • hide the # sign

Here it is a demo

The css is here

a.tag[data-ref="star" i]::before {
  content: "⭐️";
  visibility: visible;
  border-radius: 2px;
  padding: 2px;
  background: red;
  box-shadow: 0 0 4px red;
}

a.tag[data-ref="star" i] {
  visibility: hidden;
  width: 24px;
  white-space: nowrap;
}

After the above css is added in your custom.css, you could use #star to star your blocks!

image

At last, here is my complete custom.css based on GitHub - PiotrSss/logseq-clean-themes

Just tried this, what a clever way to implement a cool idea! Thanks for your effort.

1 Like