New Markdown Preview Features in VS Code

Visual Studio Codego watch the original →

VS Code introduced experimental diff rendering for Markdown previews, link validation for HTML IDs, and drag-and-drop image insertion to streamline documentation workflows.

VS Code now provides improved support for embedded HTML within Markdown files. Developers can link to HTML IDs using the standard hash syntax, which now triggers IntelliSense and error detection similar to header linking. To enable link validation, users must toggle the feature via the language status bar in the bottom right corner. Once enabled, the editor highlights broken links to headers or HTML IDs with squiggly lines, allowing for immediate correction.

Experimental Markdown Diff Rendering

VS Code has introduced an experimental feature that renders Markdown diffs directly in the preview pane rather than showing raw source text. This allows users to review changes in a rendered format, complete with scroll synchronization between the original and modified versions. Users can toggle between side-by-side and inline diff views using the menu in the top right corner of the preview. To set this as the default behavior for all Markdown files, users can modify the workbench.editor.associations setting in their configuration:

"workbench.editor.associations": {
  "*.md": "vscode.markdown.preview.editor"
}

Image Management

Markdown files now support drag-and-drop functionality for images. When a user drags an image file into the editor, VS Code copies the file into the workspace and automatically inserts the corresponding Markdown image syntax. This works alongside standard copy-paste operations and manual path referencing, with the results immediately visible in the Markdown preview.

  • #dev-tooling
  • #vscode
  • #markdown

summary by google/gemini-3.1-flash-lite. probably wrong about something. check the source.