https://github.com/ZeroOneJs/markdown-design

An out-of-the-box Markdown rendering component for Vue 3, built on markdown-it. It provides real-time Markdown rendering, table of contents generation, and full-text search, along with other commonly used features including markdown-it plugins, emoji, permalinks, and TypeScript.
https://github.com/ZeroOneJs/markdown-design

component markdown-it search toc vue-markdown vue3

Last synced: 20 days ago
JSON representation

An out-of-the-box Markdown rendering component for Vue 3, built on markdown-it. It provides real-time Markdown rendering, table of contents generation, and full-text search, along with other commonly used features including markdown-it plugins, emoji, permalinks, and TypeScript.

• Host: GitHub
• URL: https://github.com/ZeroOneJs/markdown-design
• Owner: ZeroOneJs
• License: mit
• Created: 2025-06-14T09:42:49.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2026-02-13T10:05:53.000Z (27 days ago)
• Last Synced: 2026-02-13T19:06:03.979Z (26 days ago)
• Topics: component, markdown-it, search, toc, vue-markdown, vue3
• Language: Vue
• Homepage: https://markdown-design.pages.dev
• Size: 756 KB
• Stars: 3
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-vue - markdown-design - An out-of-the-box Vue 3 Markdown component with real-time rendering, featuring TOC generation, full-text search, and more. (Components & Libraries / UI Components)
• awesome-vue - markdown-design - An out-of-the-box Vue 3 Markdown component with real-time rendering, featuring TOC generation, full-text search, and more. (Components & Libraries / UI Components)

README

          
English | [中文](./README.zh-CN.md)

# Vue Markdown Design

Vue Markdown Design is an out-of-the-box Markdown rendering component for Vue 3, built on [markdown-it](https://github.com/markdown-it/markdown-it).

## Key Features

🚀 **Core** - Real-time Markdown rendering, table of contents generation, and full-text search

📦 **Builtins** - Includes commonly used Markdown features such as emoji, permalinks, and syntax highlighting

🎨 **Theming** - Replaceable Markdown themes and component styles configurable via CSS variables

🔌 **Plugins** - Compatible with markdown-it plugins for flexible extensibility

📱 **Responsive** - Optimized for both desktop and mobile with responsive layouts

🧩 **Modular** - Import core features on demand and compose components for flexible layouts

🛡️ **Security** - HTML sanitization is enabled by default to mitigate XSS and other attacks

📋 **Typings** - Written in TypeScript with complete type definitions

## Quick Start

### Installation

```sh

npm i vue-markdown-design

```

### Usage

```js

// main.js

// Import component

import VueMarkdown from 'vue-markdown-design'

import { createApp } from 'vue'

const app = createApp()

// Register component

app.use(VueMarkdown)

app.mount('#app')

```

```vue

```

## More

For detailed documentation, visit https://markdown-design.pages.dev.

## License

Released under the [MIT](./LICENSE) license.