Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/binarynoir/vscode-markdown-tags

Enhance your Markdown documents with custom tags. Use predefined or custom labels, customizable colors, and arrow indicators to visually track tasks and statuses.
https://github.com/binarynoir/vscode-markdown-tags

markdown visual-studio-code visual-studio-code-extension visual-studio-code-extensions

Last synced: 5 days ago
JSON representation

Enhance your Markdown documents with custom tags. Use predefined or custom labels, customizable colors, and arrow indicators to visually track tasks and statuses.

Host: GitHub
URL: https://github.com/binarynoir/vscode-markdown-tags
Owner: binarynoir
License: mit
Created: 2024-11-07T02:14:53.000Z (about 2 months ago)
Default Branch: main
Last Pushed: 2024-12-04T16:05:24.000Z (23 days ago)
Last Synced: 2024-12-04T17:20:42.275Z (23 days ago)
Topics: markdown, visual-studio-code, visual-studio-code-extension, visual-studio-code-extensions
Language: TypeScript
Homepage: https://binarynoir.tech
Size: 3.22 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

README

        # 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. If you like **Tags for Markdown**, get our plugin for [Obsidian](https://github.com/binarynoir/obsidian-markdown-tags)!

[![Support me on Buy Me a Coffee](https://img.shields.io/badge/Support%20me-Buy%20Me%20a%20Coffee-orange?style=for-the-badge&logo=buy-me-a-coffee)](https://buymeacoffee.com/binarynoir)

[![Support me on Ko-fi](https://img.shields.io/badge/Support%20me-Ko--fi-blue?style=for-the-badge&logo=ko-fi)](https://ko-fi.com/binarynoir)

[![Visit my website](https://img.shields.io/badge/Website-binarynoir.tech-8c8c8c?style=for-the-badge)](https://binarynoir.tech)

![vscode-markdown-tags](./screenshot.png)

## 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:

```markdown

((tag|label))

((tag|label|background-color))

((tag|label|background-color|foreground-color))

((

```

### 🌈 Supports a Variety of Colors

Choose from predefined colors (`grey`, `green`, `orange`, etc.) or use custom hex codes to suit your design preferences.

---

## 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](https://marketplace.visualstudio.com/items?itemName=BinaryNoir.vscode-markdown-tags).

     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

```markdown

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

```

#### Arrowed Tags

```markdown

((