Markdown Tags VitePress plugin VS Code Obsidian

Reading Time

Reading time for this document is 1 minute for 272 words.

Inline syntax like ((tag|Done|green)) turns into a styled badge. Code blocks and inline code are left exactly as written, so you can document the syntax itself. The same syntax works in three places, each with its own package and its own page:

Where	Package	Docs
VitePress 2 sites	vitepress-markdown-tags	VitePress
Visual Studio Code Markdown preview	vscode-markdown-tags	VS Code
Obsidian reading view and live preview	obsidian-markdown-tags	Obsidian

Syntax

((tag|label))
((tag|label|background))
((tag|label|background|foreground))
((<tag|label|background|foreground))     arrow style

Use | or / as the separator (((tag/Done/green))), but not both in one tag. Because both are separators, a label can't contain | or /, and a tag must fit on one line.

• background is a hex code such as #0f766e, or one of the preset colors: grey, green, yellow, orange, blue, purple, red. Leave it out and a preset label picks its own color; any other label is grey.
• foreground is the text color, as a hex code.
• arrow style (((<tag|…))) draws the badge as a pointed price tag.

See it live

Preset labels pick their own color:

• todo planned grey
• doing in-progress orange
• done tip green
• on-hold tbd proposed draft wip blue
• mvp purple
• warn yellow
• blocked canceled error red

Or choose the colors yourself: Custom Hex color and the arrow style v2.

Tags work in tables too. Use the / separator there, because a | would end the table cell:

Feature	Status
Inline badges	Done
Arrow tags	Done
Per-folder tagged pages	In review