What's new in Markdown preview in VS Code

The latest Markdown preview updates in VS Code introduce enhanced support for embedded HTML with link validation and IntelliSense, alongside an experimental Markdown diff preview that visually highlights changes in rendered documents for easier reviewing. These features, customizable and designed to streamline editing and review workflows, aim to improve efficiency and user experience, especially for documentation-heavy projects.

The video showcases new features in the Markdown preview experience in Visual Studio Code, focusing on improving the editing and reviewing workflow for Markdown files. One key enhancement is better support for embedded HTML within Markdown files. Users can now link to HTML elements with IDs just like headers, benefiting from IntelliSense, error detection, and easy navigation by Ctrl/Cmd-clicking links to jump to their definitions. This feature, while not enabled by default, can be turned on via the language status menu to validate links and catch errors such as broken or mistyped references.

Another major update is the introduction of a Markdown diff preview, which allows users to view changes in Markdown files directly in the preview pane rather than just the raw text. This feature is experimental and disabled by default but can be enabled to show side-by-side or inline views of document changes with synchronized scrolling. This makes reviewing pull requests or edits more intuitive by focusing on the rendered output and highlighting additions or deletions visually, rather than sifting through Markdown syntax.

Users can easily switch between the traditional text diff view and the new Markdown preview diff using the “Reopen Editor With” command, allowing flexibility depending on their preference. The inline view mode is particularly useful for concentrating on the final document appearance while still seeing what has changed. This approach streamlines the review process, especially for documentation-heavy projects, by providing a clearer understanding of how edits affect the rendered content.

The video also touches on customization options, such as configuring VS Code to always open Markdown diffs in the preview mode by setting the appropriate workbench diff editor association. This setting can be extended to other file types and preview extensions, enabling a more tailored editing environment. Additionally, the presenter demonstrates easy image embedding in Markdown files through drag-and-drop or copy-paste, with automatic workspace copying and live preview support, reinforcing the editor’s user-friendly Markdown handling.

Overall, these updates aim to enhance the Markdown editing and reviewing experience in VS Code by integrating HTML support, improving link validation, and providing a rich, visual diff experience. While some features are still experimental, they promise to make working with Markdown more efficient and enjoyable, especially for users frequently editing or reviewing documentation and Markdown-based content. The team encourages users to try these features and provide feedback to help refine them further.