Tags for Markdown: Enhanced Styled Labels for VS Code

Add visual flair to your Markdown documents with custom tag styles! Tags for Markdown lets you highlight and style labels within Markdown documents using simple syntax, customizable colors, and optional arrow indicators—all in the native Visual Studio Code preview.

Also available for VitePress and Obsidian.

Documentation and live demo

Features

🎨 Styled Tags

🖌️ Customizable Colors

Use predefined colors or specify custom hex codes for both background and foreground colors, enabling unlimited styling options.

📄 Flexible Syntax

Simple, flexible syntax options (use either | or / as the separator):

((tag|label))
((tag/label))
((tag|label|background-color))
((tag/label/background-color))
((tag|label|background-color|foreground-color))
((tag/label/background-color/foreground-color))
((<tag|label)) <!-- Adds an arrow to the left -->
((<tag/label)) <!-- Adds an arrow to the left -->

🌈 Supports a Variety of Colors

Choose from predefined colors (grey, green, orange, etc.) or use custom hex codes to suit your design preferences. Background colors accept a predefined name or a hex code; foreground colors accept hex codes only. Tag labels that contain Markdown emphasis characters such as * are split by the parser and will not render as a tag.

---

Getting Started

1. Install the Extension:

   • From Visual Studio Code:

     1. Open Visual Studio Code.
     2. Go to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window or by pressing Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (macOS).
     3. Search for Markdown Tags.
     4. Click on the Install button.

   • From the Visual Studio Code Marketplace:

     1. Visit Markdown Tags on Visual Studio Code Marketplace.
     2. Click on the Install button.
     3. Follow the prompts to complete the installation in Visual Studio Code.

2. Add Tags in your Markdown files using the syntax below.

3. Open Preview (Right-click the Markdown file → "Open Preview" or Ctrl+Shift+V on Windows or Cmd+Shift+V on macOS) to view styled tags in action.

Basic Syntax Examples

Status Tags

((tag|todo)) ((tag/in-progress/#ffcc00)) ((tag|done|#28a745|#ffffff))

Arrowed Tags

((<tag|planned)) ((<tag/custom test))

Customizing Colors

((tag|background|#ff4500)) ((tag/foreground//#ff6347)) ((tag|both colors|#32cd32|#ffffff))

---

Tags and Colors

Available supported tags: todo, planned, in-progress, doing, done, tip, on-hold, tbd, proposed, draft, wip, mvp, blocked, canceled, error, warning, warn

For each tag, the following colors are available: grey, green, yellow, orange, blue, purple, red.

See Examples Markdown Documents

Tag Examples

TODO

• ((tag|todo|grey)) or ((tag/todo/grey))
• ((tag|todo|green)) or ((tag/todo/green))
• ((tag|todo|yellow)) or ((tag/todo/yellow))
• ((tag|todo|orange)) or ((tag/todo/orange))
• ((tag|todo|blue)) or ((tag/todo/blue))
• ((tag|todo|purple)) or ((tag/todo/purple))
• ((tag|todo|red)) or ((tag/todo/red))

PLANNED

• ((tag|planned|grey)) or ((tag/planned/grey))
• ((tag|planned|green)) or ((tag/planned/green))
• ((tag|planned|yellow)) or ((tag/planned/yellow))
• ((tag|planned|orange)) or ((tag/planned/orange))
• ((tag|planned|blue)) or ((tag/planned/blue))
• ((tag|planned|purple)) or ((tag/planned/purple))
• ((tag|planned|red)) or ((tag/planned/red))

IN-PROGRESS

• ((tag|in-progress|grey)) or ((tag/in-progress/grey))
• ((tag|in-progress|green)) or ((tag/in-progress/green))
• ((tag|in-progress|yellow)) or ((tag/in-progress/yellow))
• ((tag|in-progress|orange)) or ((tag/in-progress/orange))
• ((tag|in-progress|blue)) or ((tag/in-progress/blue))
• ((tag|in-progress|purple)) or ((tag/in-progress/purple))
• ((tag|in-progress|red)) or ((tag/in-progress/red))

DOING

• ((tag|doing|grey)) or ((tag/doing/grey))
• ((tag|doing|green)) or ((tag/doing/green))
• ((tag|doing|yellow)) or ((tag/doing/yellow))
• ((tag|doing|orange)) or ((tag/doing/orange))
• ((tag|doing|blue)) or ((tag/doing/blue))
• ((tag|doing|purple)) or ((tag/doing/purple))
• ((tag|doing|red)) or ((tag/doing/red))

DONE

• ((tag|done|grey)) or ((tag/done/grey))
• ((tag|done|green)) or ((tag/done/green))
• ((tag|done|yellow)) or ((tag/done/yellow))
• ((tag|done|orange)) or ((tag/done/orange))
• ((tag|done|blue)) or ((tag/done/blue))
• ((tag|done|purple)) or ((tag/done/purple))
• ((tag|done|red)) or ((tag/done/red))

TIP

• ((tag|tip|grey)) or ((tag/tip/grey))
• ((tag|tip|green)) or ((tag/tip/green))
• ((tag|tip|yellow)) or ((tag/tip/yellow))
• ((tag|tip|orange)) or ((tag/tip/orange))
• ((tag|tip|blue)) or ((tag/tip/blue))
• ((tag|tip|purple)) or ((tag/tip/purple))
• ((tag|tip|red)) or ((tag/tip/red))

... (repeat as necessary for remaining tags: on-hold, tbd, proposed, draft, mvp, etc.)

---

With Arrow (using ((<tag|label|bgcolor)))

MVP

• ((<tag|mvp|grey)) or ((<tag/mvp/grey))
• ((<tag|mvp|green)) or ((<tag/mvp/green))
• ((<tag|mvp|yellow)) or ((<tag/mvp/yellow))
• ((<tag|mvp|orange)) or ((<tag/mvp/orange))
• ((<tag|mvp|blue)) or ((<tag/mvp/blue))
• ((<tag|mvp|purple)) or ((<tag/mvp/purple))
• ((<tag|mvp|red)) or ((<tag/mvp/red))

... (repeat as necessary for remaining tags: on-hold, tbd, proposed, draft, mvp, etc.)

---

Advanced Options

CSS Integration

Add custom styles by modifying the style.css file in the extension folder to match your preferences.

Error Handling

The extension defaults to grey when invalid colors are detected to ensure a consistent and polished look.

---

Related projects

The same ((tag|label|color)) syntax is available in other tools. The VS Code extension is the main project: start there for the syntax reference and to report issues common to all of them.

Project	Where it works
vscode-markdown-tags	Visual Studio Code
obsidian-markdown-tags	Obsidian
vitepress-markdown-tags	VitePress 2 sites

---

License

MIT License

---

Feedback and support

Bug reports, feature requests and questions are all welcome. Please open them on this project's GitHub issue tracker:

• Found a bug? Report it. Include your version and the steps to reproduce it.
• Have an idea? Request a feature. Tell us what you are trying to do.
• Something else? Browse open issues to see if it has already been raised.

Pull requests are welcome too.

More from BinaryNoir

Tags for Markdown for VS Code is one of a family of open-source VitePress plugins, editor extensions and command-line tools from BinaryNoir. Browse them all, with documentation and live demos, at binarynoir.tech.

VitePress plugins

• Auto Sidebar: sidebar built from your folders
• Auto Navbar: navbar built from your folders
• Sidebar Accordion: one open sidebar group at a time
• Markdown Tags: inline status badges
• Reading Time Tag: reading-time estimates
• Glossary Tooltips: hover definitions from one glossary file
• Downloads: downloadable files next to your pages
• Exclude: keep pages out of the build with a .exclude file
• README Index: README.md index pages for VuePress migrations
• HTML Escape: stray tags and braces shown as text, not build errors
• Broken Links: dead links shown as text, not build errors

Vite plugins

• Optimize Images: smaller images in the build output
• Image Fallback: a placeholder instead of a failed build

Editor extensions

• Tags for Markdown for Obsidian: status badges in Obsidian

Command-line tools

• NoirWatch: get notified when a web page changes
• NoirCon: get notified when a site, server or port goes down
• callrx: amateur radio callsign lookup

Website, docs and demos: binarynoir.tech

Author

John Smith III, BinaryNoir. Thanks to all contributors and users for their support and feedback.