|
1 | 1 | ## Overview |
2 | 2 |
|
3 | | -The [Quarto VS Code Extension](https://marketplace.visualstudio.com/items?itemName=quarto.quarto) includes a visual markdown editor that supports all of Quarto's markdown syntax including tables, citations, cross-references, footnotes, divs/spans, definition lists, attributes, raw HTML/TeX, and more: |
| 3 | +The [Quarto VS Code Extension](https://open-vsx.org/extension/quarto/quarto) includes a visual markdown editor that supports all of Quarto's markdown syntax including tables, citations, cross-references, footnotes, divs/spans, definition lists, attributes, raw HTML/TeX, and more: |
| 4 | + |
| 5 | +{.border .light-content fig-alt='{{< meta tool.name >}} with a document called `libraries.qmd` open in visual editing mode. The subtitle and list of items are typeset. The visual editing toolbar is visible at the top of the document.' } |
| 6 | + |
| 7 | +{.border .dark-content fig-alt='Positron with a document called `libraries.qmd` open in visual editing mode. The subtitle and list of items are typeset. The visual editing toolbar is visible at the top of the document.' } |
4 | 8 |
|
5 | | -{.border width="609"} |
6 | 9 |
|
7 | 10 | You can switch between visual and source mode at any time and can even edit documents concurrently in both modes. To switch between visual and source mode: |
8 | 11 |
|
9 | 12 | 1. Use the <kbd>⇧⌘ F4</kbd> keyboard shortcut. |
10 | 13 |
|
11 | 14 | 2. Use the context menu from anywhere in a document: |
12 | 15 |
|
13 | | - {.border width="609"} |
| 16 | + {.border .light-content fig-alt='The context menu in with the Edit in Visual Mode command highlighted.' width="609"} |
| 17 | + |
| 18 | + {.border .dark-content fig-alt='The context menu in with the Edit in Visual Mode command highlighted.' width="609"} |
14 | 19 |
|
15 | 20 | 3. Use the **Edit in Visual Mode** and **Edit in Source Mode** commands: |
16 | 21 |
|
17 | | - {.border width="609"} |
| 22 | + {.border .light-content fig-alt='The command palette with the Edit in Visual Mode command highlighted.' width="609"} |
| 23 | + |
| 24 | + {.border .dark-content fig-alt='The command palette with the Edit in Visual Mode command highlighted.' width="609"} |
18 | 25 |
|
19 | 26 | 4. Use the editor menu: |
20 | 27 |
|
21 | | - {.border width="609"} |
| 28 | + {.border .light-content width="609" fig-alt='The editor menu with the Edit in Visual Mode command highlighted.'} |
| 29 | + |
| 30 | + {.border .dark-content width="609" fig-alt='The editor menu with the Edit in Visual Mode command highlighted.'} |
| 31 | + |
| 32 | + |
| 33 | +:::{.content-hidden unless-meta="tool.is_positron"} |
| 34 | +5. Using the **Source**/**Visual** buttons in the toolbar: |
| 35 | + |
| 36 | + {.border .light-content fig-alt="The toolbar in Positron with the Source and Visual buttons highlighted." width="609"} |
| 37 | + |
| 38 | + {.border .dark-content fig-alt="The toolbar in Positron with the Source and Visual buttons highlighted." width="609"} |
| 39 | +::: |
22 | 40 |
|
23 | 41 | You can also right click a `.qmd` document in the file explorer and select the **Open With...** command, which will prompt you for the editor to open the file with: |
24 | 42 |
|
25 | | -{.border width="609"} |
| 43 | +{.border .light-content width="609"} |
| 44 | + |
| 45 | + |
| 46 | +{.border .dark-content width="609"} |
26 | 47 |
|
27 | 48 | Note that this menu also provides an option to configure the default editor for `.qmd` files: use this if you want to primarily edit in visual mode and occasionally switch to source mode. |
28 | 49 |
|
@@ -88,19 +109,19 @@ If you are at the beginning of a line (as displayed above), you can also enter p |
88 | 109 |
|
89 | 110 | The editor toolbar includes buttons for the most commonly used formatting commands: |
90 | 111 |
|
91 | | -{.border width="609"} |
| 112 | +{.border width="609"} |
92 | 113 |
|
93 | 114 | Additional commands are available on the **Format**, **Insert**, and **Table** menus: |
94 | 115 |
|
95 | 116 | | Format | Insert | Table | |
96 | 117 | |------------------------|------------------------|------------------------| |
97 | | -| {.border fig-alt="The contents of the Format drop down menu."} | {.border fig-alt="The contents of the Insert drop down menu."} | {.border fig-alt="The contents of the Table drop down menu."} | |
| 118 | +| {.border fig-alt="The contents of the Format drop down menu."} | {.border fig-alt="The contents of the Insert drop down menu."} | {.border fig-alt="The contents of the Table drop down menu."} | |
98 | 119 |
|
99 | 120 | ## Editor Options |
100 | 121 |
|
101 | 122 | There are a variety of {{< meta tool.name >}} options available to configure the behavior of the visual editor. You can locate these options by filtering on `quarto.visualEditor` in the settings pane: |
102 | 123 |
|
103 | | -{.border width="609"} |
| 124 | +{.border width="609"} |
104 | 125 |
|
105 | 126 | Options enable configuration of appearance (font size, content width, etc.), markdown output (e.g. column wrapping), spell checking, and default spacing for lists. |
106 | 127 |
|
|
0 commit comments