Typora Style Markdown Editor for VS Code

A WYSIWYG (What You See Is What You Get) Markdown editor for Visual Studio Code, inspired by Typora.

Features

• WYSIWYG Editing: Edit Markdown with real-time preview, just like Typora
• Source/Preview Toggle: Switch between source code and rendered view
• Rich Formatting Toolbar: Quick access to common formatting options
• Keyboard Shortcuts: Familiar shortcuts for efficient editing
• Syntax Highlighting: Beautiful code block highlighting with highlight.js
• Math Support: LaTeX math rendering with KaTeX
• GFM Support: GitHub Flavored Markdown including tables, task lists, and strikethrough
• Theme Aware: Automatically adapts to VS Code's light/dark theme

Installation

From Source

1. Clone this repository:

   git clone https://github.com/your-username/typora-vscode.git
   cd typora-vscode
   

2. Install dependencies:

   pnpm install
   

3. Download required libraries:

   node scripts/download-libs.js
   

4. Compile the extension:

   pnpm run compile
   

5. Press F5 in VS Code to launch the extension in debug mode.

From VSIX Package

code --install-extension typora-vscode-0.1.0.vsix

Usage

Opening Files

1. Open any .md or .markdown file
2. Right-click and select "Open With..." → "Typora Markdown Editor"
3. Or use the command palette: Typora: Open with Typora Editor

Toolbar Actions

Keyboard Shortcuts

Configuration

Configure the extension in VS Code settings:

{
  "typora.theme": "auto",       // "auto", "light", or "dark"
  "typora.fontSize": 16,        // Base font size in pixels
  "typora.lineHeight": 1.6,     // Line height multiplier
  "typora.enableMath": true,    // Enable LaTeX math rendering
  "typora.enableMermaid": true  // Enable Mermaid diagram rendering
}

Supported Markdown Features

• Headings (H1-H6)
• Emphasis (bold, italic, strikethrough)
• Links and Images
• Code (inline and blocks with syntax highlighting)
• Blockquotes
• Lists (ordered, unordered, task lists)
• Tables (GFM style)
• Horizontal Rules
• Math (inline $...$ and block $$...$$)

Development

Project Structure

typora-vscode/
├── src/
│   ├── extension.ts           # Extension entry point
│   └── markdownEditorProvider.ts  # Custom editor provider
├── media/
│   ├── editor.css             # Editor styles
│   ├── editor.js              # Editor logic
│   ├── highlight.css          # Syntax highlighting styles
│   ├── marked.min.js          # Markdown parser
│   ├── highlight.min.js       # Code highlighting
│   └── katex.min.js/css       # Math rendering
├── .vscode/
│   ├── launch.json            # Debug configuration
│   └── tasks.json             # Build tasks
└── package.json               # Extension manifest

Building

# Install dependencies
pnpm install

# Download third-party libraries
node scripts/download-libs.js

# Compile TypeScript
pnpm run compile

# Watch mode for development
pnpm run watch

Debugging

1. Open the project in VS Code
2. Press F5 to launch the Extension Development Host
3. Open a Markdown file and use "Open With..." to test the editor

Known Limitations

• Complex nested HTML may not convert perfectly to Markdown
• Some advanced Typora features (diagrams, export) are not yet implemented
• Large files may experience performance issues

Roadmap

• [ ] Mermaid diagram support
• [ ] Export to PDF/HTML
• [ ] Image drag & drop
• [ ] Custom themes
• [ ] Outline/TOC view
• [ ] Find and replace

License

MIT License - see LICENSE for details.

Contributing

Contributions are welcome! Please feel free to submit issues and pull requests.

Acknowledgments

• Typora for the inspiration
• marked for Markdown parsing
• highlight.js for syntax highlighting
• KaTeX for math rendering