quartz/docs/plugins/InlineBadges.md

title	tags
InlineBadges	plugin/transformer

This plugin allows the user to create multipurpose badges that can be used within inline text.

Note

For information on how to add, remove or configure plugins, see the configuration#Plugins page.

Syntax

A badge may be used in line with the following syntax, within an inline code block:

`[!!KEY:TEXT]` -> Normal badges
`[!!|ghs>SUBTEXT:TEXT]` -> Github Success
`[!!|ghb>SUBTEXT:TEXT]` -> Github Blue
`[!!|KEY:TEXT]` -> Plaintext
`[!!|ICON|ARIA:TEXT|COLOR-RGB]` -> Custom icon. Color can be a CSS Variable, eg. `var(--color-red-rgb)`

• KEY defines the name of the preset to be used, which are equal to the obsidian callout types.
• TEXT and SUBTEXT can be any text of your choosing. They cannot contain the | character as it is the main delimiter.
• ICON is the name of the lucide icon to be used.¹
• ARIA defines the name of the aria label used for the badge (Not visible to the end user).
• COLOR-RGB is a HTML color, such as 256, 12, 32.
• ghs and ghb should not be changed, as they define what colour is to be used.

Examples:

`[!!note:There is no such thing as genuine questions]`
`[!!|ghs>checks:success]`
`[!!|ghb>contributors:52]`
`[!!|warning:Don't say that I didn't tell you.]`
`[!!|menu|menu-item:Go to Settings > Delete Account|140, 200, 110]`

What is `[!!danger:love]`?

Configuration

This plugin accepts the following configuration options:

• customBadges, an array of objects that defines custom badge types, along with their colours and icon.

Badge Object

A badge object is defined like so:

{
  name: "foobar",
  icon: "icon_name",
  color: [10, 10, 10, 1],
  textOpacity: 0.117,
}

Where foobar is the name of the badge, icon is the name of the lucide icon¹ to be used, color is an array defining the background colour in the format [RED, GREEN, BLUE, ALPHA]² These custom badges can now be used with the syntax

`[!!foobar:text-here]`

API

• Category: Transformer
• Function name: Plugin.InlineBadges()
• Source: N/A

---

1. The name must be in lower case. That is, use accessibility instead of Accessibility, lucide-accessibility or LiAccessibility (The plugin may not accept them!) ↩︎

2. Note that ALPHA only goes from 0 to 1, whereas the rest go from 0 to 256 ↩︎