https://github.com/zaaack/vscode-markdown-editor

A vscode extension to make your vscode become a full-featured WYSIWYG markdown editor
https://github.com/zaaack/vscode-markdown-editor

echarts graphviz katex katex-support markdown markdown-editor marktext mathjax mermaid music-notion typora vditor vscode vscode-extension wysiwyg

Last synced: 29 days ago
JSON representation

A vscode extension to make your vscode become a full-featured WYSIWYG markdown editor

• Host: GitHub
• URL: https://github.com/zaaack/vscode-markdown-editor
• Owner: zaaack
• License: mit
• Created: 2021-04-08T03:56:03.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-07-29T01:09:59.000Z (3 months ago)
• Last Synced: 2024-09-30T00:44:26.676Z (about 1 month ago)
• Topics: echarts, graphviz, katex, katex-support, markdown, markdown-editor, marktext, mathjax, mermaid, music-notion, typora, vditor, vscode, vscode-extension, wysiwyg
• Language: TypeScript
• Homepage: https://marketplace.visualstudio.com/items?itemName=zaaack.markdown-editor
• Size: 9.44 MB
• Stars: 362
• Watchers: 4
• Forks: 48
• Open Issues: 63
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# Markdown Editor — A full-featured WYSIWYG editor for markdown

[![](https://vsmarketplacebadge.apphb.com/version-short/zaaack.markdown-editor.svg)](https://marketplace.visualstudio.com/items?itemName=zaaack.markdown-editor) [![](https://vsmarketplacebadge.apphb.com/installs-short/zaaack.markdown-editor.svg)](https://marketplace.visualstudio.com/items?itemName=zaaack.markdown-editor) [![](https://vsmarketplacebadge.apphb.com/downloads-short/zaaack.markdown-editor.svg)](https://marketplace.visualstudio.com/items?itemName=zaaack.markdown-editor) [![](https://vsmarketplacebadge.apphb.com/rating-short/zaaack.markdown-editor.svg)](https://marketplace.visualstudio.com/items?itemName=zaaack.markdown-editor)

## Demo

![demo](./demo.gif)

## Features

- What You See Is What You Get (WYSIWYG)

- Auto sync changes between the VSCode editor and webview

- Copy markdown/html

- Uploaded/pasted/drag-dropped images will be auto-saved to the `assets` folder

- Multi-theme support

- Shortcut keys

- Multiple editting modes: instant Rendering mode (**Recommand!**) / WYSIWYG mode / split screen mode

- Markdown extensions

- Multiple graph support including KaTeX / Mermaid / Graphviz / ECharts / abc.js(notation) / ...

- For more usage please see [vditor](https://github.com/Vanessa219/vditor)

## Install

[https://marketplace.visualstudio.com/items?itemName=zaaack.markdown-editor](https://marketplace.visualstudio.com/items?itemName=zaaack.markdown-editor)

## Supported syntax

[demo article](https://ld246.com/guide/markdown)

## Usage

### 1. Command mode in markdown file

- open a markdown file

- type `cmd-shift-p` to enter command mode

- type `markdown-editor: Open with markdown editor`

### 2. Key bindings

- open a markdown file

- type `ctrl+shift+alt+m` for win or `cmd+shift+alt+m` for mac

### 3. Explorer Context menu

- right click on markdown file

- then click `Open with markdown editor`

### 4. Editor title context menu

- right click on a opened markdown file's tab title

- then click `Open with markdown editor`

### Custom CSS (custom layout and vditor personalization)

Edit your settings.json and add

```

"markdown-editor.customCss": "my custom css rules"

// Eg: "markdown-editor.customCss": ".vditor-ir pre.vditor-reset {line-height: 32px;padding-right: calc(100% - 800px) !important; margin-left: 100px;    font-family: system-ui !important;}"

```

## Acknowledgement

- [vscode](https://github.com/microsoft/vscode)

- [vditor](https://github.com/Vanessa219/vditor)

## Todo

- [ ] Using [Custom Text Editor](https://code.visualstudio.com/api/extension-guides/custom-editors#custom-text-editor) ([demo](https://github.com/gera2ld/markmap-vscode))

## License

MIT

## Support

If you like this extension make sure to star the repo. I am always looking for new ideas and feedback. In addition, it is possible to [donate via paypal](https://www.paypal.me/zaaack).