docs: formatting of debig screenshots

Signed-off-by: Christian Lechner <[email protected]>
radius-project · Dec 17, 2023 · 908f9f9 · 908f9f9
1 parent 8667df5
commit 908f9f9
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 32 deletions.
diff --git a/...ntributing-code/contributing-code-first-commit/first-commit-00-prerequisites.md b/...ntributing-code/contributing-code-first-commit/first-commit-00-prerequisites.md
@@ -31,26 +31,32 @@ However, you can also install all tools locally. This is the list of core depend
 - [Golangci-lint](https://golangci-lint.run/usage/install/#local-installation)
 - [jq](https://jqlang.github.io/jq/download/)  
 - Make  
+
+### Install make
 
-  **Linux**: Install the `build-essential` package:
+For `make` we advice the following installation steps depending on you OS.
 
-  ```bash
-  sudo apt-get install build-essential
-  ```
+#### Linux
 
-  **Mac**:
+Install the `build-essential` package:
 
-  Using Xcode:
-
-  ```bash  
-  xcode-select --install
-  ```
-
-  Using Homebrew:
+```bash
+sudo apt-get install build-essential
+```
+
+#### Mac
+
+Using Xcode:
+
+```bash  
+xcode-select --install
+```
+
+Using Homebrew:
 
-  ```bash  
-  brew install make
-  ```
+```bash  
+brew install make
+```
 
 ## Next step
 

diff --git a/...ting-code/contributing-code-first-commit/first-commit-04-debugging-cli/index.md b/...ting-code/contributing-code-first-commit/first-commit-04-debugging-cli/index.md
@@ -14,25 +14,25 @@ You can debug your changes right from VS Code. The repository has a `.vscode` di
 
 This section describes the configuration named **"Debug rad CLI"**. This is a basic Go debugger configuration that is set up to launch the `rad` CLI. To try it out, set a breakpoint in `main.go`. Set the breakpoint by clicking in the *gutter* to the left of the line numbers in you editor. Place the breakpoint on the new line you added in `main.go`.
 
-![Placing a breakpoint in main.go](img/main-with-breakpoint.png)
+<img src="img/main-with-breakpoint.png" alt="Placing a breakpoint in main.go" width="600" height="auto">
 
 The debugger will stop the program prior to crossing over your breakpoint. Execute the following steps to launch the CLI in the debugger:
 
 - Open the debug pane.
 
-![VS Code debug pane](img/vscode-debug-pane.png)
+  <img src="img/vscode-debug-pane.png" alt="VS Code debug pane" width="600" height="auto">
 
 - Select the **"Debug rad CLI"** entry from the drop down list.
 
-![VS Code debug configuration selection](img/vscode-debug-config-selection.png)
+  <img src="img/vscode-debug-config-selection.png" alt="VS Code debug configuration selection" width="600" height="auto">
 
 - Click the icon with the green triangle to launch the debugging session.
 
-![VS Code start selected debug configuration](img/vscode-debug-start.png)
+  <img src="img/vscode-debug-start.png" alt="VS Code start selected debug configuration" width="600" height="auto">
 
 Before the debugging will start the project is build in the background. This might take some time. After the build is completed the program will start and the breakpoint should be hit.
 
-![Hitting a breakpoint in main.go](img/main-breakpoint-hit.png)
+<img src="img/main-breakpoint-hit.png" alt="Hitting a breakpoint in main.go" width="600" height="auto">
 
 You can play around with the various debugger features, like stepping into code. When you're done, hit the red square *stop* icon in the debugger tools to end the debugging session.
 
@@ -44,29 +44,29 @@ This section describes the configuration named **"Debug rad CLI (prompt for args
 
 Let us test this setup by checking debugging the `rad version` command. The file is located at `cmd/rad/cmd/version.go`. Set a breakpoint at the beginning of the function `writeVersionString`:
 
-![Placing a breakpoint in version.go](img/version-with-breakpoint.png)
+<img src="img/version-with-breakpoint.png" alt="Placing a breakpoint in version.go" width="600" height="auto">
 
 The debugger will stop the program prior to crossing over your breakpoint. Execute the following steps to launch the CLI command in the debugger:
 
 - Open the debug pane.
 
-![VS Code debug pane](img/vscode-debug-pane.png)
+  <img src="img/vscode-debug-pane.png" alt="VS Code debug pane" width="600" height="auto">
 
 - Select the **"Debug rad CLI (prompt for args)"** entry from the drop down list.
 
-![VS Code debug configuration selection with arguments](img/vscode-debug-config-selection-with-args.png)
+  <img src="img/vscode-debug-config-selection-with-args.png" alt="VS Code debug configuration selection with arguments" width="600" height="auto">
 
 - Click the icon with the green triangle to launch the debugging session.
 
-![VS Code start selected debug configuration with arguments](img/vscode-debug-start-version-with-args.png)
+  <img src="img/vscode-debug-start-version-with-args.png" alt="VS Code start selected debug configuration with arguments" width="600" height="auto">
 
 - The system will open up the command palette. Enter the command you want to debug i.e. `version` and confirm.  
 
-![VS Code debug command prompt](img/vscode-debug-prompt-cmd.png)
+  <img src="img/vscode-debug-prompt-cmd.png" alt="VS Code debug command prompt" width="600" height="auto">
 
 Before the debugging will start the project is build in the background. This might take some time. After the build is completed the program will start and the breakpoint should be hit.
 
-![Hitting a breakpoint in version.go](img/version-breakpoint-hit.png)
+<img src="img/version-breakpoint-hit.png" alt="Hitting a breakpoint in version.go" width="600" height="auto">
 
 You can play around with the various debugger features, like stepping into code. When you're done, hit the red square *stop* icon in the debugger tools to end the debugging session.
 

diff --git a/docs/contributing/contributing-code/contributing-code-prerequisites/README.md b/docs/contributing/contributing-code/contributing-code-prerequisites/README.md
@@ -122,13 +122,16 @@ To get the Dev Container up and running
 
 1. If not already done, clone your fork of the Project Radius repository to your local file system and open the folder with VS Code.
 1. Click the "X"-like button in VS Code to open a remote window
-![Button for opening remote window command palette](img/vscode-devcontainer-open-remote-button.png)
+
+    ![Button for opening remote window command palette](img/vscode-devcontainer-open-remote-button.png)
 
 1. Select the option "Reopen in Container" in the command palette
-![Remote window command palette](img/vscode-cmd-palette-container.png)
+
+    ![Remote window command palette](img/vscode-cmd-palette-container.png)
 
 The dev container will be started automatically.
-![Dev container startup process](img/vscode-devcontainer-opening-process.png)
+
+    ![Dev container startup process](img/vscode-devcontainer-opening-process.png)
 
 When doing this the first time this might take a bit as all dependencies need to be downloaded and installed in your container - so grab a cup of ☕ and enjoy the work done by the container.
 
@@ -140,15 +143,20 @@ Once the container is up and running you can start with your contribution.
 
 to have all prerequisites installed locally you must install the tools mentioned in the sections [Tool Overview - Required Tools](#required-tools) and [Tool Overview - Additional Tools](#additional-tools) on your local machine.
 
-For `make` we advice the following steps depending on you OS:
+#### Install make
+
+For `make` we advice the following installation steps depending on you OS
 
-**Linux**: Install the `build-essential` package:
+##### Linux
+
+Install the `build-essential` package:
 
 ```bash
 sudo apt-get install build-essential
 ```
 
-**Mac**:
+##### Mac
+
 Using Xcode:
 
 ```bash