From 7be1ce076130243868deb04438998f0799f74eb7 Mon Sep 17 00:00:00 2001
From: Brian Davison <b.davison@napier.ac.uk>
Date: Fri, 6 Sep 2024 17:02:38 +0100
Subject: [PATCH] icon-prefix and admonitions

---
 _sass/custom/custom.scss         |  3 ++
 tutorials/tools/vscode/vscode.md | 52 ++++++++++++++++++++++++--------
 2 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss
index 6a51b04..ef82189 100644
--- a/_sass/custom/custom.scss
+++ b/_sass/custom/custom.scss
@@ -26,6 +26,9 @@
   font-size: large;
   color: $grey-dk-100;
 }
+.icon-prefix {
+  display: none;
+}
 .icon-prefix ~ .language-shell {
   margin-left: 2rem;
   margin-top: -3rem;
diff --git a/tutorials/tools/vscode/vscode.md b/tutorials/tools/vscode/vscode.md
index 16fe4e0..3f7ebee 100644
--- a/tutorials/tools/vscode/vscode.md
+++ b/tutorials/tools/vscode/vscode.md
@@ -78,7 +78,9 @@ development.
 
 Install the MAUI workloads by executing the command:
 
-<code>dotnet workload install maui</code>
+``` shell
+dotnet workload install maui
+```
 
 The command is the same for both Mac and Windows
 
@@ -91,7 +93,6 @@ to executable or configuration files.
 You can see the environment variables you currently have set with the command:
 
 [<i class="fa-brands fa-windows icon"></i>](https://learn.microsoft.com/en-us/windows-server/administration/windows-commands/set_1){:target="_blank"}
-
 <hr class="icon-prefix">
 
 ``` shell
@@ -100,7 +101,11 @@ set
 
 
 [<i class="fa-brands fa-apple icon"></i>](https://support.apple.com/en-gb/guide/terminal/apd382cc5fa-4f58-4449-b20a-41c53c006f8f/mac){:target="_blank"}
-`env`
+<hr class="icon-prefix">
+
+``` shell
+env
+```
 
 The following variables are required for building and testing Android versions of your app.
 
@@ -113,18 +118,24 @@ The following variables are required for building and testing Android versions o
 
 The best approach is to create a folder in your home directory and let .NET install the appropriate versions there specifically for use with .NET. Instructions for this are given later. For now, it is enough to create the relevant directories and set the environment variables.
 
-
-!!! warning "Warning!"
-
-     Please check whether you already have these environment variables defined. If so, changing them may affect other applications that you use.
+{: .warning }
+Please check whether you already have these environment variables defined. If so, changing them may affect other applications that you use.
 
 **Create the new directory**
 
 [<i class="fa-brands fa-windows icon"></i>](https://learn.microsoft.com/en-us/windows-server/administration/windows-commands/mkdir){:target="_blank"} 
-`mkdir C:\Users\**USERNAME**\MAUI`
+<hr class="icon-prefix">
+
+``` shell
+mkdir C:\Users\**USERNAME**\MAUI
+```
 
 [<i class="fa-brands fa-apple icon"></i>](https://ss64.com/mac/mkdir.html){:target="_blank"}
-`mkdir ~/MAUI`
+<hr class="icon-prefix">
+
+``` shell
+mkdir ~/MAUI
+```
 
 
 ??? info "Create the variables on Windows"
@@ -190,18 +201,29 @@ When you are done, you should have at least the extensions shown below.
 Run the following command to configure your machine:
 
 <i class="fa-brands fa-windows icon"></i>
-`dotnet build -t:InstallAndroidDependencies -f:net8.0-android -p:AndroidSdkDirectory="%ANDROID_HOME%" -p:JavaSdkDirectory="%JAVA_HOME%" -p:AcceptAndroidSDKLicenses=True`
+<hr class="icon-prefix">
 
+``` shell
+dotnet build -t:InstallAndroidDependencies -f:net8.0-android -p:AndroidSdkDirectory="%ANDROID_HOME%" -p:JavaSdkDirectory="%JAVA_HOME%" -p:AcceptAndroidSDKLicenses=True
+```
 
 <i class="fa-brands fa-apple icon"></i>
-`dotnet build -t:InstallAndroidDependencies -f:net8.0-android -p:AndroidSdkDirectory="${ANDROID_HOME}" -p:JavaSdkDirectory="${JAVA_HOME}" -p:AcceptAndroidSDKLicenses=True`
+<hr class="icon-prefix">
+
+``` shell
+dotnet build -t:InstallAndroidDependencies -f:net8.0-android -p:AndroidSdkDirectory="${ANDROID_HOME}" -p:JavaSdkDirectory="${JAVA_HOME}" -p:AcceptAndroidSDKLicenses=True
+```
 
 ## 9. Update Android SDK
 
 The Android SDK installed in the previous step may not be completely up to date. Update the contents with
 
 [<i class="fa-solid fa-circle-info icon"></i> ](https://developer.android.com/tools/sdkmanager){:target="_blank"}
-`sdkmanager --update`
+<hr class="icon-prefix">
+
+``` shell
+sdkmanager --update
+```
 
 ## 10. Build project
 
@@ -232,7 +254,11 @@ To build and test your apps for the Android platform, you need either an Android
 The emulator can be installed using one of the following commands:
 
 [<i class="fa-solid fa-circle-info icon"></i>](https://developer.android.com/tools/sdkmanager){:target="_blank"}
-`sdkmanager --install emulator`
+<hr class="icon-prefix">
+
+``` shell
+sdkmanager --install emulator
+```
 
 !!! warning "Warning!"