Docs Preview Extension
This extension uses the docs.microsoft.com CSS to provide more accurate preview for Markdown published to Docs via the Open Publishing System (OPS). This includes all Markdown as supported by the CommonMark specification, as well as custom Markdown syntax for Docs, such as:
There are a few options for how to see Docs preview:
You can also use the default keyboard shortcut,
NEW: Docs Preview now also includes Search Results Preview, which uses publicly available information from Google to approximate how your article will look when returned in Google search. This helps validate that your title, description, and other information will be helpful for users trying to find the right technical information. See Search Results Preview below for more information.
The docs-preview extension supports light, dark and high contrast themes. You can select a default theme by going to File => Preferences => Settings => Extensions => Docs Preview Extension Configuration and choosing a theme. A toast notification will show after a theme is selected to prompt the user to reload the VS Code for the settings to take effect.
If you also have the Docs Markdown extension installed, you can access preview from the Docs Markdown menu:
To install both Docs Preview and Docs Markdown, along with other useful extensions for authoring Markdown for docs.microsoft.com, install the Docs Authoring Pack.
Search Results Preview
Using publicly available information from Google, Search Results Preview generates an approximation of what your article will look like when returned in Google search on Chrome with default font settings. This is the most common way people find content on Docs, accounting for more than half of all page hits. Because much of Google's algorithm is secret, the preview might not match exactly. But it gives you an idea of how your title will be truncated and what description users will see when they find your article via search. Use it to make sure you're providing the most helpful, relevant information.
To use Search Results Preview:
Docs Preview doesn't support all Docs custom Markdown. In some cases, custom Markdown renders as plain text. In rare cases, unsupported Markdown causes preview to break. For example, lightboxed images aren't supported and breaks preview. We're investigating switching to a more accurate preview based on Docs Build, but for now these edge cases are low priority to fix.