Office Viewer
English | 简体中文 | 繁體中文
Introduction
A Markdown editor for VS Code with a WYSIWYG experience and export to PDF, HTML and DOCX.
- Markdown:
.md, .markdown
- WYSIWYG and instant-render (IR) editing modes
- Live preview side-by-side with the source
- Export to PDF, HTML and DOCX (right-click in the editor)
- Math (KaTeX), diagrams (Mermaid / PlantUML), charts and code highlighting
- Wiki-style links between notes (
[[page]], [[page#heading]])
- AI polish via the VS Code Language Model API or a custom endpoint
- Paste images directly into the document
Editor
This extension registers a custom editor for Markdown files. To use VS Code's built-in Markdown editor instead, add this to your settings.json:
{
"workbench.editorAssociations": {
"*.md": "default",
"*.markdown": "default"
}
}
Use the Switch markdown editor command (also available from the editor title bar) to toggle between the built-in and the WYSIWYG editor.
Export requires Chromium for PDF generation; set the browser path with ma-markdown.chromiumPath.
Shortcuts are documented in shortcut.md. A few highlights:
- New line:
Ctrl+Enter / ⌘ Enter
- Hard line break:
Shift+Enter / ⇧ Enter
- Edit in VS Code:
Ctrl Alt E / ⌘ ^ E
- Switch editor:
Ctrl Alt E / ⌘ ^ E (title bar) or ma-markdown.switch
- Enhance paste (image-aware) on
Ctrl+V / ⌘ V for Markdown files
Settings
| Setting |
Description |
ma-markdown.editorTheme |
Editor color theme |
ma-markdown.codeMirrorTheme |
Syntax theme for code blocks |
ma-markdown.mermaidTheme |
Theme for Mermaid diagrams |
ma-markdown.editMode |
Default edit mode: wysiwyg or ir |
ma-markdown.restoreViewState |
Restore caret focus when opening a Markdown file |
ma-markdown.workspacePathAsImageBasePath |
Use the workspace path as the image base path |
ma-markdown.pasteImageToWorkspacePath |
Paste images into the workspace path |
ma-markdown.pasterImgPath |
Path template for pasted images |
ma-markdown.chromiumPath |
Chromium location for PDF export |
ma-markdown.puppeteerArgs |
Extra Chromium launch arguments |
ma-markdown.pdfMarginTop |
Top margin for exported PDF |
Development Guide
Prerequisites
Getting started
git clone https://github.com/cweijan/vscode-office.git
cd vscode-office
npm install
Development
Desktop extension:
npm run dev
Press F5 in VS Code, or choose Extension from Run and Debug.
Web extension (browser-hosted):
npm run dev:web
Choose Extension (Web) from Run and Debug.
Build & package
npm run build # production build
npm run package # create .vsix
Credits
