diff --git a/docs/basics/user-interface/adding-interactivity.md b/docs/basics/user-interface/adding-interactivity.md
index 1351d472d..732bd6c12 100644
--- a/docs/basics/user-interface/adding-interactivity.md
+++ b/docs/basics/user-interface/adding-interactivity.md
@@ -53,7 +53,7 @@ The simplest way of using commands is to bind to a method in the object's data c
1. **Add a method to the view model**: Define a method in a view model which will handle the command.
- ```csharp
+```csharp title='C#'
public class MainWindowViewModel
{
// highlight-start
@@ -67,6 +67,6 @@ The simplest way of using commands is to bind to a method in the object's data c
2. **Bind the Method**: Associate the method with the control that triggers it.
- ```xml
+ ```xml title='XAML'
```
diff --git a/docs/basics/user-interface/assets.md b/docs/basics/user-interface/assets.md
index 0a23bd98c..b8e906b0d 100644
--- a/docs/basics/user-interface/assets.md
+++ b/docs/basics/user-interface/assets.md
@@ -70,7 +70,7 @@ Avalonia UI has built-in converters which can load assets for bitmaps, icons and
You can write code to load assets using the `AssetLoader` static class. For example:
-```csharp
+```csharp title='C#'
var bitmap = new Bitmap(AssetLoader.Open(new Uri(uri)));
```
diff --git a/docs/basics/user-interface/code-behind.md b/docs/basics/user-interface/code-behind.md
index 6248c78b7..e122cfc0b 100644
--- a/docs/basics/user-interface/code-behind.md
+++ b/docs/basics/user-interface/code-behind.md
@@ -87,7 +87,7 @@ namespace AvaloniaApplication1.Views
With the control reference available in the code-behind, you can set properties. For example, you can change the background property like this:
-```csharp
+```csharp title='C#'
greetingButton.Background = Brushes.Blue;
```
diff --git a/docs/get-started/install.md b/docs/get-started/install.md
index 7273ebb41..7d2e982b6 100644
--- a/docs/get-started/install.md
+++ b/docs/get-started/install.md
@@ -14,7 +14,7 @@ The best way to get started with Avalonia is by creating an application using a
To install the [Avalonia templates](https://github.com/AvaloniaUI/avalonia-dotnet-templates), run the following command:
-```bash
+```bash title='Bash'
dotnet new install Avalonia.Templates
```
@@ -24,7 +24,7 @@ For .NET 6.0 and earlier, replace `install` with `--install`
To list the installed templates run
-```bash
+```bash title='Bash'
dotnet new list
```
@@ -47,13 +47,13 @@ Avalonia Window avalonia.window [C#],F
Once the project templates are installed, you can create a new _Avalonia UI_ application from CLI by running the following command:
-```bash
+```bash title='Bash'
dotnet new avalonia.app -o MyApp
```
This will create a new folder called `MyApp` containing your application files. To run the application, navigate to the `MyApp` folder and run:
-```bash
+```bash title='Bash'
cd MyApp
dotnet run
```
diff --git a/docs/get-started/test-drive/add-a-control.md b/docs/get-started/test-drive/add-a-control.md
index 7b3f36df6..43abce2f9 100644
--- a/docs/get-started/test-drive/add-a-control.md
+++ b/docs/get-started/test-drive/add-a-control.md
@@ -14,12 +14,14 @@ So far, the main window of your application displays only a text string. On this
Avalonia contains a built-in control that creates a button. Follow this procedure to replace the text string currently in the `Window`'s content zone with a button control.
- Stop the app if it is running.
-- Locate the
-``
+- Locate
+```xml title='XAML'
+
+```
in the `MainView.axaml` file..
- Delete the entire line.
- Insert a `Button` tag as shown:
-```xml
+```xml title='XAML'
```
@@ -42,7 +44,7 @@ procedure to set the `HorizontalAlignment` to centered instead.
- Add a new attribute to the Button tag as follows:
-```xml
+```xml title='XAML'
```
diff --git a/docs/get-started/test-drive/create-a-project.md b/docs/get-started/test-drive/create-a-project.md
index d2e4cd67f..291cdb505 100644
--- a/docs/get-started/test-drive/create-a-project.md
+++ b/docs/get-started/test-drive/create-a-project.md
@@ -13,11 +13,20 @@ import VsNewAvaloniaProjectScreenshot from '/img/get-started/test-drive/vs-new-a
import RiderRunScreenshot from '/img/get-started/test-drive/rider-run.png';
import InitialWindowScreenshot from '/img/get-started/test-drive/initial-window.png';
+import vscode1 from '/img/get-started/test-drive/vscode-command-new-project.png';
+import vscode2 from '/img/get-started/test-drive/vscode-select-project-template.png';
+import vscode3 from '/img/get-started/test-drive/vscode-name-new-project.png';
+import vscode4 from '/img/get-started/test-drive/vscode-create-project.png';
+import vscode6 from '/img/get-started/test-drive/vscode-select-csharp.png';
+import vscode7 from '/img/get-started/test-drive/vscode-launch-app.png';
+import vscode8 from '/img/get-started/test-drive/vscode-app-running.png';
+
+
## Install Templates
Before starting, ensure that you have [installed the Avalonia templates](../install.md):
-```bash
+```bash title='Bash'
dotnet new install Avalonia.Templates
```
@@ -29,7 +38,7 @@ To get started, we're going to use the MVVM Avalonia template: `Avalonia MVVM Ap
Run the command:
-```bash
+```bash title='Bash'
dotnet new avalonia.mvvm -o GetStartedApp
```
@@ -69,6 +78,17 @@ The template will create a new solution and two new projects. `GetStartedApp` is
+
+
+ * Bring up the Command Palette using `⇧ ⌘ P` and then type ".NET" and find and select the **.NET: New Project** command.
+
+ * After selecting the command, you'll need to choose the project template. Choose **Avalonia MVVM app**.
+
+ * Name the project G`etStartedApp`, and press enter.
+
+ * You'll need to provide a path for where the project should be created. Do this, and then press **Create project**
+
+
## Run the Project
@@ -79,7 +99,7 @@ We're now ready to run the project!
Go into the `GetStartedApp` directory and run:
-```bash
+```bash title='Bash'
dotnet run
```
@@ -97,6 +117,13 @@ Press the **Run** button in the Rider toolbar:
Hit `F5` to run the project.
+
+
+ * Hit `F5` to run the project and Select `C#` as the debugger
+
+ * Select **C#: GetStartedApp Demo** to launch the application with the debugger connected.
+
+
The solution will build and run.
diff --git a/docs/get-started/test-drive/main-window.md b/docs/get-started/test-drive/main-window.md
index 47da1e56b..9cac40938 100644
--- a/docs/get-started/test-drive/main-window.md
+++ b/docs/get-started/test-drive/main-window.md
@@ -32,7 +32,7 @@ Inside this user control, you will see a `...` XAML tag.
`Text` to the screen. The `Text` property of the `TextBlock` is bound to the **Greeting** property of
the **MainViewModel** class.
-```
+```xml title='XAML'
```
diff --git a/static/img/get-started/test-drive/vscode-app-running.png b/static/img/get-started/test-drive/vscode-app-running.png
new file mode 100644
index 000000000..39e39cc3b
Binary files /dev/null and b/static/img/get-started/test-drive/vscode-app-running.png differ
diff --git a/static/img/get-started/test-drive/vscode-command-new-project.png b/static/img/get-started/test-drive/vscode-command-new-project.png
new file mode 100644
index 000000000..8ba67e7bf
Binary files /dev/null and b/static/img/get-started/test-drive/vscode-command-new-project.png differ
diff --git a/static/img/get-started/test-drive/vscode-create-project.png b/static/img/get-started/test-drive/vscode-create-project.png
new file mode 100644
index 000000000..57f4812fc
Binary files /dev/null and b/static/img/get-started/test-drive/vscode-create-project.png differ
diff --git a/static/img/get-started/test-drive/vscode-launch-app.png b/static/img/get-started/test-drive/vscode-launch-app.png
new file mode 100644
index 000000000..6f16682b5
Binary files /dev/null and b/static/img/get-started/test-drive/vscode-launch-app.png differ
diff --git a/static/img/get-started/test-drive/vscode-name-new-project.png b/static/img/get-started/test-drive/vscode-name-new-project.png
new file mode 100644
index 000000000..6111f981c
Binary files /dev/null and b/static/img/get-started/test-drive/vscode-name-new-project.png differ
diff --git a/static/img/get-started/test-drive/vscode-select-csharp.png b/static/img/get-started/test-drive/vscode-select-csharp.png
new file mode 100644
index 000000000..ad6b42429
Binary files /dev/null and b/static/img/get-started/test-drive/vscode-select-csharp.png differ
diff --git a/static/img/get-started/test-drive/vscode-select-project-template.png b/static/img/get-started/test-drive/vscode-select-project-template.png
new file mode 100644
index 000000000..3bef9cfc9
Binary files /dev/null and b/static/img/get-started/test-drive/vscode-select-project-template.png differ