MD File Viewer for VS Code

A full custom editor for Markdown — the VS Code edition of the MD File Viewer desktop app. Double-click any .md file and it opens directly in a GitHub-style (GFM) viewer with a WYSIWYG editor, a Preview / Split / Edit switcher, a documentsidebar, and a live word / line counter — all styled with GitHub's Primer light/dark palette.

Features

Opens automatically — .md, .markdown, .mdx, .mdown and .mkd files open in MD File Viewer by default. Switch back to the plain text editor any time with Reopen Editor With….
Three view modes — Preview, Split and Edit, chosen from the header, remembering your last choice.
WYSIWYG editing — a true rich-text surface (Toast UI Editor) with a formatting toolbar, plus GitHub-accurate rendering in preview mode.
GitHub preview — headings, tables, task lists, blockquotes, fenced code blocks with syntax highlighting and images rendered the way GitHub does.
Document sidebar — the folder's Markdown files, with quick open/create.
Copy button on code blocks — one click copies a fenced code block.
Smart links — external links open in your browser; links to local Markdown files open right in the viewer.
Formatting commands — bold, italic, strikethrough, inline code, code block, headings, quote, lists, task list, links, images and horizontal rules from the Command Palette (for the plain text editor).
Keyboard shortcuts — Ctrl+B (bold), Ctrl+I (italic) in Markdown files.
Status bar — word, line and character counts for the active Markdown file.

Usage

Open any .md, .markdown, .mdx, .mdown or .mkd file — it opens in MD File Viewer automatically.
Switch between Preview, Split and Edit in the header.
Use Reopen Editor With… to fall back to the plain text editor, or run MD File Viewer: Open with MD File Viewer to force it.

Commands

Command	Description
`MD File Viewer: Open with MD File Viewer`	Open the file in the custom editor.
`MD File Viewer: Open Preview to the Side`	Open the custom editor in a split column.
Formatting commands	Bold, Italic, Strikethrough, Inline Code, Code Block, Heading 1–3, Normal Text, Quote, Bulleted/Numbered/Task lists, Link, Image, Horizontal Rule.

Settings

Setting	Default	Description
`mdFileViewer.preview.lineBreaks`	`false`	Render single line breaks as `<br>`.
`mdFileViewer.preview.githubStyle`	`true`	Use GitHub's Primer palette.
`mdFileViewer.preview.contentWidth`	`980`	Maximum content width in pixels.
`mdFileViewer.statusBar.enabled`	`true`	Show the word/line counter.

Development

npm install
npm run compile     # bundle dist/extension.js + dist/webview.js
npm run watch       # rebuild on change
npm run check-types # tsc --noEmit
npm test            # run the integration smoke tests

Press F5 in VS Code to launch an Extension Development Host, then open a Markdown file.

Build a VSIX

npm run package   # production bundle
npm run vsix      # produces md-file-viewer-1.0.0.vsix

Install it with Extensions: Install from VSIX… or code --install-extension md-file-viewer-1.0.0.vsix.

Author

Amiran Kimadze (itsarmen)

MD File Viewer

ITSARMEN