Skip to content
| Marketplace
Sign in
Visual Studio Code>Visualization>Cursor Style MarkdownNew to Visual Studio Code? Get it now.
Cursor Style Markdown

Cursor Style Markdown

Cursor Style Markdown

| (0) | Free
Cursor-style Markdown: .md files open as a rendered, directly editable document with a Preview / Markdown toggle.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Cursor Style Markdown

Cursor-style Markdown for VS Code. Every .md file opens as a rendered document that you edit directly — the preview is the editor. A Preview | Markdown pair in the editor title bar swaps the tab in place between the rendered view and the raw source.

Cursor Style Markdown rendering a document

Why

Cursor renders Markdown in a native rich-text editor: a centred 800px column, borderless headings, soft code surfaces, and you type straight into the rendered page. VS Code's built-in preview is full-width, read-only, with underlined headings and boxed code blocks. Cursor Style Markdown brings the Cursor experience to VS Code, typography values included, while staying an ordinary extension.

Features

Edit in the rendered view. No mode switch. The webview runs a TipTap/ProseMirror rich-text editor over a Markdown serializer — the same approach Cursor uses. Because it is a CustomTextEditorProvider, every keystroke becomes an ordinary document edit, so undo, dirty state, auto-save, split views and Git all behave exactly as they do in the text editor.

Formatting as you type. Markdown input rules (# , - , 1. , > , and fenced code) plus a formatting toolbar that appears on selection.

Shortcut Action
⌘B / Ctrl+B Bold
⌘I / Ctrl+I Italic
⌘⇧S / Ctrl+Shift+S Strikethrough
⌘E / Ctrl+E Inline code
⌘⌥1–⌘⌥6 Heading level 1–6
⌘⇧B Blockquote
⌘⌥C Code block
⌘S Save, from inside the rendered view

Full GitHub-flavoured Markdown. Tables you can edit in place with drag-to-resize columns, task lists you can tick, strikethrough, autolinks, fenced code with syntax highlighting, heading anchors, and YAML front matter that stays hidden and intact.

Cursor's look. Centred column, borderless weight-590 headings, 14px/1.4 workbench font, and #F0F0F0 document text on dark themes. Colours follow the active theme (light, dark, high contrast).

Links and images behave. Relative links open the target file, #anchors scroll in place, external links open in the browser, and relative images resolve against the document folder (or the workspace root for /paths).

Only two buttons. VS Code's own Markdown chrome — the "Open Preview" title-bar buttons, the breadcrumb editor-type dropdown, and the two built-in Markdown editors — is switched off so the Preview | Markdown pair is all you see. Each piece is individually reversible; see Settings.

Requirements

VS Code 1.85 or later.

Install

Not yet on the Marketplace. Build a .vsix and install it:

npm install
npm run package
code --install-extension cursor-style-markdown-0.5.1.vsix --force

Then reload the window (⌘⇧P → Developer: Reload Window).

If you use VS Code profiles

A CLI install lands in the default profile only. In any other profile the extension is installed but never scanned — it will be missing from the editor picker with no error in any log. Install into each profile by name:

code --profile "Work" --install-extension cursor-style-markdown-0.5.1.vsix --force

Profile names come from userDataProfiles in ~/Library/Application Support/Code/User/globalStorage/storage.json. A profile whose useDefaultFlags.extensions is true inherits the default profile instead.

Not recommended inside Cursor

Cursor already ships a native Markdown editor that claims .md at the same priority, so the two conflict and Cursor raises a "conflicting defaults" prompt.

Settings

Setting Default Description
cursorStyleMarkdown.brightText true Draw document text at Cursor's #F0F0F0 on dark themes instead of the theme's editor foreground (#CCCCCC in Dark Modern). Light and high-contrast themes always use the theme's own colour.
cursorStyleMarkdown.contentWidth 800 Width in pixels of the centred content column.
cursorStyleMarkdown.hideEditorTypePicker true Hide the editor-type dropdown in the breadcrumb bar. Sets breadcrumbs.showEditorType to false for the active profile, which affects all file types.
cursorStyleMarkdown.hideBuiltInMarkdownEditors true Hide VS Code's built-in Markdown Preview and Markdown Editor from the picker, via workbench.editor.hiddenEditorTypes.
cursorStyleMarkdown.hideBuiltInPreviewButtons true Hide the built-in "Open Preview to the Side" / "Open as Preview" title-bar buttons. The commands remain in the Command Palette.

The last three write to the active profile's user settings, which is what makes the behaviour follow you between profiles. Every write is guarded and reversible: turning a setting off removes exactly what Cursor Style Markdown added and leaves your other values alone.

markdown.preview.fontFamily, markdown.preview.fontSize and markdown.preview.lineHeight are honoured when you set them explicitly; otherwise the Cursor defaults apply.

To make .md files open in the text editor by default again while keeping the toggle buttons:

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

Editing normalizes formatting

Saving from the rendered view rewrites the file from the document model, so formatting is normalized: soft-wrapped paragraphs are joined onto one line and table delimiter rows become | --- |. Cursor behaves the same way.

Content is preserved — front matter, code fences, tables, task lists, links wrapping inline code, and inline HTML such as <kbd>. Measured on a 144-line document, a single keystroke rewrites 4 lines, all cosmetic. If you need byte-exact control over the source, switch to Markdown and edit there.

Development

npm install
npm run watch      # rebuild on change
npm run typecheck  # tsc --noEmit; esbuild does not type-check
npm test           # vitest unit tests
npm run check      # typecheck + test + build

Press F5 ("Run Extension") to launch an Extension Development Host, then open any .md file.

Trademark

Not affiliated with, sponsored by, or endorsed by Anysphere, the makers of Cursor. "Cursor" is used here only to describe the editing experience this extension reproduces in VS Code.

License

MIT

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
  • Your Privacy Choices
  • Consumer Health Privacy
© 2026 Microsoft