Preview for qmd files in VS code.

[cderv]

Discussed in quarto-dev/quarto-cli#4381

^{Originally posted by @Adam-Antios February 16, 2023}
In the case of .md files, VS Code has a live preview feature at hand without the need for launching a server. It is easy to work on the files without a fuss.

On the other hand, Quarto has the preview server, but as a workflow it is more cumbersome when you simply want to view a markdown file you work with. Moreover, the quarto preview actually creates an html file along with miscellaneous resources.

Given that .qmd files are markdown, can't you activate the same functionality? Obviously the most advanced features will not be rendered in the live preview but there will be at least the base functionality.

[jjallaire]

Our take on visual feedback for markdown authoring is a visual editing mode (which is now available in the VS Code extension). Details here: https://quarto.org/docs/visual-editor/vscode/

If you still prefer to author in markdown, you can actually show both the source and visual editors at the same time side-by-side and the visual editor will update as you type (throttled by ~ 1 second).

[laurapoggio-sptools]

It would be pretty good to have a simple preview. The visual editing mode is more like a wysiwyg type of editor. A quick preview of the qmd would be very welcomed when quickly editing files. It already exists for markdown and it would be great to have it also for qmd. Thanks!

[jjallaire]

One of the things I was pointing out is that you can show the source and visual editors side by side (and the visual editor will update as you work in the source editor). So this provides a simple preview mode within the capabilities of the current extension.

[laurapoggio-sptools]

Thanks for the clarification. I will try it out.

[eyayaw]

Another way is to change the file association of quarto files to markdown. I don't know, though, whether it strips off other features of .qmd. What do you think @cderv?

{
"files.associations": {"*.qmd": "markdown"},
}

Edit: the above removes all the quarto features; chunk running buttons and language features are not visible. The following keybinding works for me without changing the file associations. Just adding | editorLangId == 'quarto' to the default keybinding for markdown.

 {
    "key": "cmd+k v",
    "command": "markdown.showPreviewToSide",
    "when": "!notebookEditorFocused && editorLangId == 'markdown' | editorLangId == 'quarto'"
  }