Skip to content
| Marketplace
Sign in
Visual Studio Code>Visualization>Markdown Editor ColorfulNew to Visual Studio Code? Get it now.
Markdown Editor Colorful

Markdown Editor Colorful

FanRenyi

|
11 installs
| (0) | Free
A powerful and versatile markdown viewer that uses a WYSIWYG editor and supports viewing Word, Excel files, etc.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Colorful Markdown Editor

Markdown

English | 简体中文 | 繁體中文

A powerful and versatile markdown viewer that uses a WYSIWYG editor and supports viewing Word, Excel files, etc."

colorful_markdown_editor_demo.gif

This extension changes the default markdown editor to the vditor.

If you want to use the original vscode editor, insert this in your settings.json.

{
  "workbench.editorAssociations": {
    "*.md": "default",
    "*.markdown": "default"
  }
}

Right-click in the editor to export Markdown as PDF, DOCX or HTML. PDF export relies on Chromium, and you can configure the Chromium browser path via vscode-office.chromiumPath.

colorful_markdown_editor_export

Shortcuts: Base on Vditor shortcuts and more:

  • Move list up: Ctrl Alt I / ⌘ ^ I
  • Move list down: Ctrl Alt J / ⌘ ^ J
  • Edit in VS Code: Ctrl Alt E / ⌘ ^ E

Summary

Name Keymap Remarks
Emoji :/⌘ E
Headings Ctrl H / ⌘ H see below
Bold Ctrl B / ⌘ B
Italic Ctrl I / ⌘ I
Strikeout Ctrl S / ⌘ S
Link Ctrl K / ⌘ K see below
Unordered List Ctrl L / ⌘ L see below
Ordered List Ctrl O / ⌘ O see below
Task List Ctrl J / ⌘ J see below
Blockquote Ctrl ; / ⌘ ; see below
Horizontal Ctrl Shift H / ⌘ ⇧ H
Code Block Ctrl U / ⌘ U see below
Inline Code Ctrl G / ⌘ G
Insert Block to Before Ctrl Shift B / ⌘ ⇧ B wysiwyg & ir mode
Insert Block to End Ctrl Shift E / ⌘ ⇧ E wysiwyg & ir mode
Table Ctrl M / ⌘ M see below
Undo Ctrl Z / ⌘ Z
Redo Ctrl Y / ⌘ Y
Hide Edit Ctrl P / ⌘ P sv mode
Fullscreen Ctrl ' / ⌘ '
Move Block to Up Ctrl Shift U / ⌘ ⇧ U wysiwyg & ir mode
Move Block to Down Ctrl Shift D / ⌘ ⇧ D wysiwyg & ir mode
Remove Ctrl Shift X / ⌘ ⇧ X wysiwyg mode
At User @
Mistyped Backspace

Headings Ctrl H / ⌘ H

Name Keymap
Bigger Ctrl + / ⌘ +
Smaller Ctrl - / ⌘ -
H1-H6 Ctrl Alt 1/2/3/4/5/6 / ⌘ ⌥ 1/2/3/4/5/6
Menu Ctrl H / ⌘ H

Tips:

  • Resize editor via ctrl/cmd+mouse scroll.
  • Hyperlinks can be opened by ctrl/meta+click or double-click.

Introduction

This extension supports previewing these common office file formats in VS Code.

  • Markdown: .md
  • Excel: .xls, .xlsx, .csv
  • Word: .docx
  • Svg: .svg
  • Pdf: .pdf
  • Font: .ttf, .otf, .woff, .woff2
  • HttpRequest: .http
  • Windows Reg: .reg
  • Compressed file: .zip, .jar, .vsix, .rar

HTML

The html editor supports live viewing. Press ctrl+shift+v to open the live view.

Credits

  • Vscode Office: vscode-office
  • PDF rendering: mozilla/pdf.js/
  • Docx rendering: VolodymyrBaydalka/docxjs
  • XLSX rendering:
    • SheetJS/sheetjs: XLSX parsing
    • myliang/x-spreadsheet: XLSX rendering
  • HTTP: Rest Client
  • Markdown: Vanessa219/vditor
  • Material Icon theme: PKief/vscode-material-icon-theme
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2026 Microsoft