Overview
Quarto can render Jupyter notebooks represented as plain text (.qmd) or as a normal notebook file (.ipynb). The Quarto VS Code Extension includes many tools that enhance working these documents, including:

Integrated render and preview for Quarto documents.
Syntax highlighting for markdown and embedded languages
Completion and diagnostics for YAML options
Completion for embedded languages (e.g. Python, R, Julia, etc.)
Commands and key-bindings for running cells and selected lines.
Live preview for LaTeX math as well as Mermaid and Graphviz diagrams

The Quarto extension integrates directly with the Jupyter, R, and Julia extensions. For example, here the Quarto extension runs a Python cell and shows contextual help for Python functions:

You can install the Quarto extension from the VS Code Extension Marketplace or the Open VSX Registry.


VS Code Editors
Depending on your preference and the task at hand, you can author documents for rendering by Quarto using three different editors within VS Code:

The source code editor for editing .qmd documents as text.
The Visual Editor for WYSIWYG editing of .qmd documents.
The Notebook Editor for editing .ipynb notebooks.

We’ll cover the the source code editor below, however you might also want to consult the documentation for the Visual Editor or Notebook Editor after you’ve become familar with the basics.


Render and Preview
The Quarto VS Code extension includes commands and keyboard shortcuts for rendering Quarto documents (both standalone and within websites or books). After rendering, quarto preview is used behind the scenes to provide a preview pane within VS Code alongside your document:

To render and preview, execute the Quarto: Render command. You can alternatively use the Ctrl+Shift+K keyboard shortcut, or the Render button at the top right of the editor:










Note that on the Mac you should use Cmd rather than Ctrl as the prefix for all Quarto keyboard shortcuts.


Additionally, there are commands available to render specific formats. Here is a complete list of the supported render commands:

Quarto: Render
Quarto: Render HTML
Quarto: Render PDF
Quarto: Render DOCX

The Quarto: Render command renders the default format of the currently active document. The other commands render specific formats (regardless of the document’s default format). The Ctrl+Shift+K keyboard shortcut will re-execute the most recently executed render command.









Embedded preview is currently supported for HTML and PDF based formats (including revealjs and beamer slideshows). However, for Word and other formats you need to use an appropriate external program to preview the output.




Render on Save
By default Quarto does not automatically render .qmd or .ipynb files when you save them. This is because rendering might be very time consuming (e.g. it could include long running computations) and it’s good to have the option to save periodically without doing a full render.
However, you can configure the Quarto extension to automatically render whenever you save. You can do this either within VS Code settings or within the YAML options for your project or document. To configure the VS Code setting, search for quarto.render in settings and you’ll find the Render on Save option:

You might also want to control this behavior on a per-document or per-project basis. If you include the editor: render-on-save option in your document or project YAML it will supersede whatever your VS Code setting is. For example:
editor:
  render-on-save: true


External Preview
If you prefer to use an external browser for preview (or have no preview triggered at all by rendering) you can use the Preview Type option to specify an alternate behavior:



Code Cells
There are a variety of tools that make it easier to edit and execute code cells. Editing tools include syntax highlighting, code folding, code completion, and signature tips:

For Python, R, and Julia cells, commands are available to execute the current cell, previous cells, or the currently selected line(s). Cell output is shown side by side in the Jupyter interactive console:

Here are all of the commands and keyboard shortcuts available for executing cells:



Quarto Command
Keyboard Shortcut




Run Current Cell
⇧⌘ Enter


Run Selected Line(s)
⌘ Enter


Run Next Cell
⌥⌘ N


Run Previous Cell
⌥⌘ P


Run All Cells
⌥⌘ R


Run Cells Above
⇧⌥⌘ P


Run Cells Below
⇧⌥⌘ N



You can quickly insert a new code cell using the Ctrl+Shift+I keyboard shortcut.
Enhanced features for embedded languages (e.g. completion, code execution) can be enabled by installing the most recent version(s) of these extensions:

Python Extension
R Extension
Julia Extension


Execution Directory
Embedded language extensions handle the working directory for execution in distinct ways:

The Python Extension runs code within the directory of the source file from which code is executed. You can customize this behavior using the jupyter.notebookFileRoot option.
The R Extension runs code within the working directory of the R session running in the R Interactive terminal. You can change this directory manually using setwd().
The Julia Extension runs code within the working directory of the Julia session running in the Julia REPL terminal. You can change this direcdtory manually using cd().




Contextual Assistance
Execute the Quarto: Show Assist Panel command to show a panel in the sidebar that shows contextual assistance depending on the current cursor location:

Help/documentation is shown when editing code
A realtime preview of equations is shown when editing LaTeX math
Thumbnail previews are shown when your cursor is located on a markdown image.

For example, below help on the matplotlib plot() function is shown automatically when the cursor is located on the function:



Live Preview
While editing LaTeX math or Mermaid and Graphviz diagrams, click the Preview button above the code (or use the Ctrl+Shift+L keyboard shortcut) to open a live preview which will update automatically as you edit.
Here we see a preview of the currently edited LaTeX equation displayed in the Quarto assist panel:

Here we see a Graphviz diagram preview automatically updated as we edit:



YAML Intelligence
YAML code completion is available for project files, YAML front matter, and executable cell options:

If you have incorrect YAML it will also be highlighted when documents are saved:



Code Snippets
Code snippets are templates that make it easier to enter repeating code patterns (e.g. code blocks, callouts, divs, etc.). Execute the Insert Snippet command within a Quarto document to insert a markdown snippet:


IntelliSense
VSCode uses IntelliSense to suggest snippets or possible values for a specific function while typing. This is turned off by default for snippets, but not for values. To enable snippet suggestions in IntelliSense while typing or when selecting a text snippet and pressing ctrl+space, the setting editor.snippetSuggestions needs to be set to a value other than none (for example to inline).

Press F1 and search for Preferences: Open Settings (UI) or File > Preferences > Settings
Search for following term @lang:quarto editor.snippetSuggestions. Editor: Snippet Suggestions should show up.
Change value to a not-none value.




Document Navigation
If you have a large document use the outline view for quick navigation between sections:

You can also use the Go to Symbol in Editor command or keyboard shortcut Ctrl+Shift+O for type-ahead navigation of the current document’s outline.
Use the Go to File command Ctrl+P to navigate to other files and the Go to Symbol in Workspace command Ctrl+T for type-ahead navigation to all headings in the workspace:



Learning More
Besides the traditional source editor described above, you can also use one of the following other editors depending on your preferences and task at hand:

The Visual Editor for WYSIWYG editing of .qmd documents.
The Notebook Editor for editing .ipynb notebooks.