Vditor Markdown Editor

Vditor is a browser-based Markdown editor designed to adapt to various application scenarios. It is implemented in TypeScript and supports integration with native JavaScript as well as modern frameworks like Vue, React, Angular, and Svelte.

Key capabilities include:

• Three Editing Modes: WYSIWYG (What You See Is What You Get), IR (Instant Rendering), and SV (Split-screen Preview).
• Extensive Syntax Support: CommonMark and GFM specifications, plus extensions like Mermaid diagrams, MathJax/KaTeX for math, ECharts for charts, and WaveDrom for digital waveforms.
• Rich Feature Set: Outline support, mind maps, task lists, image lazy loading, multi-theme switching (Black, White, Green), and multi-language support (Chinese, English, Korean).

Vditor supports different themes for the editor, the rendered content, and code blocks.

Editor Themes

Built-in themes: classic, dark.

• Set via options.theme during initialization.
• Update via setTheme() after initialization.
• Customize by modifying variables in index.less.

Content Themes

Applies to the HTML output of Markdown. Built-in themes: ant-design, light, dark, wechat.

• Requirement: The display element must have class="vditor-reset".
• Set via options.preview.theme during initialization.
• Update via setTheme() or setContentTheme().

Code Block Themes

Built-in themes: github and 36 others.

• Set via options.preview.hljs during initialization.
• Update via setTheme() or setCodeTheme().

Vditor supports a wide array of Markdown syntaxes and specialized extensions:

Core Specifications

• CommonMark: Full support for headers, code blocks, HTML blocks, lists, emphasis, links, images, etc.
• GFM (GitHub Flavored Markdown): Tables, task lists, strikethrough, and auto-links.

Specialized Extensions

• Diagrams & Charts:
  • Flowcharts, Sequence diagrams, and Gantt charts via Mermaid.
  • Graphviz rendering.
  • Line charts, Pie charts, and Mind maps via ECharts.
  • Digital waveforms via WaveDrom.
  • UML diagrams via PlantUML.
• Mathematics: Math blocks and inline math via MathJax and KaTeX.
• Music: Sheet music via abc.js.
• Other:
  • YAML Front Matter.
  • Footnotes and Table of Contents (ToC).
  • Chinese context optimizations (e.g., automatic spacing between Chinese and English characters).

Vditor provides three modes to suit different user preferences and application needs:

1. WYSIWYG (wysiwyg): A rich-text style mode friendly to users unfamiliar with Markdown, while remaining seamless for experienced users.
2. Instant Rendering (ir): An elegant mode similar to Typora, where Markdown is rendered immediately as you type.
3. Split View (sv): A traditional mode where the editing area and the preview area are separated, ideal for large-screen typesetting.

Most features associated with these modes can be enabled or disabled via configuration switches.

Vditor provides three distinct modes to cater to different user expertise and screen real estate:

1. WYSIWYG (What You See Is What You Get): Best for users unfamiliar with Markdown syntax. It provides a rich-text-like experience where formatting is applied immediately.
2. IR (Instant Rendering): Designed for advanced Markdown users (similar to Typora). It provides an elegant experience where the syntax is rendered into its visual form as you type.
3. SV (Split-screen Preview): The traditional Markdown approach. It features a separate editing area and a preview area, which is ideal for large screens and traditional layout workflows.

Vditor supports four theme sets: and-design, classic, dark, and wechat.

• You can customize styles using Less/CSS.
• Theme colors can be modified by changing variables in index.less.
• To display content more effectively, add class="vditor-reset" (for classic theme) or class="vditor-reset vditor-reset--dark" (for dark theme) to the content display element.

To use Vditor in a CommonJS or module-based environment, install it using npm:

npm install vditor --save

To develop on Vditor, ensure you have the Node.js LTS version installed. Follow these steps to run the project locally:

1. Download and unzip the latest source code.
2. Run npm install in the root directory to install dependencies.
3. Run npm run start to launch a local server at http://localhost:9000.
4. After making modifications, run npm run build to package the code into the dist directory.

Import Vditor and its associated styles, then instantiate it by passing an element ID and an options object.

import Vditor from 'vditor'
import "~vditor/src/assets/less/index"

const vditor = new Vditor(id, {options...})