Vue Stream Markdown

GitHub Flavored Markdown

Full support for GFM including tables, task lists, strikethrough, and autolinks.

Vue Stream Markdown parses GitHub Flavored Markdown through Comark, including tables, task lists, autolinks, and strikethrough.

Tables

Create formatted tables with Table options:

| Feature       | Supported | Notes         |
| ------------- | --------- | ------------- |
| Tables        | ✅        | Full support  |
| Task Lists    | ✅        | Interactive   |
| Strikethrough | ✅        | ~~Like this~~ |

Column Alignment

Control text alignment using colons in the separator row:

| Left | Center | Right |
| :--- | :----: | ----: |
| A    |   B    |     C |
| 1    |   2    |     3 |

Alignment Syntax:

  • :--- - Left-aligned (default)
  • :---: - Center-aligned
  • ---: - Right-aligned

vue-stream-markdown enhances tables with:

  • Responsive scrolling - Tables scroll horizontally on narrow screens
  • Fullscreen view - Open wide tables in a modal
  • Download button - Export tables as CSV, TSV, or Markdown
  • Proper spacing - Optimized cell padding

Complex Tables

Tables support inline formatting:

| Feature          | Description                         | Status     |
| ---------------- | ----------------------------------- | ---------- |
| **Code blocks**  | Optional `Shiki` highlighting | ✅ Ready   |
| _Custom tags_    | Map tags to Vue components          | ✅ Ready   |
| ~~Legacy parser~~ | Replaced by incremental parsing     | ❌ Removed |

Interactive Features

Table include interactive buttons such as copy and download. To configure these controls, see the Controls documentation.

Task Lists

Create interactive todo lists:

- [x] Setup project structure
- [x] Install dependencies
- [ ] Write documentation
- [ ] Deploy to production

Renders as:

Task List Syntax

  • - [ ] - Unchecked task (whitespace in brackets)
  • - [x] - Checked task (lowercase x)
  • - [X] - Also checked (uppercase X)

Nested Task Lists

Task lists can be nested:

- [ ] Phase 1: Setup
  - [x] Initialize repository
  - [x] Configure build tools
  - [ ] Setup CI/CD
- [ ] Phase 2: Development
  - [ ] Implement features
  - [ ] Write tests

Renders as:

Task Lists in Different Contexts

Task lists work in various contexts:

## Shopping List

- [ ] Milk
- [ ] Eggs
- [x] Bread

> **Note**: Here's a quote with tasks:
>
> - [x] Complete quote formatting
> - [ ] Add more examples

Renders as:

Strikethrough

Mark text as deleted or outdated:

**Before:** ~~500ms response time~~
**After:** 50ms response time ⚡

Result:

Autolinks

URLs and email addresses are automatically converted to links:

Visit https://vue-stream-markdown.netlify.app for the documentation.

Browse https://github.com/jinghaihan/vue-stream-markdown for source and examples.

Contact jhh19980114@gmail.com

Custom UI Components

Replace built-in UI components with your own implementations

HTML Rendering

Render native and custom HTML-like tags through Comark.