Replace <figure> with md tables

Author: AristurtleDev

articles/tutorials/building_2d_games/01_what_is_monogame/index.md

@@ -17,23 +17,11 @@ The official first release of MonoGame occurred in 2011, as an open source versi
 
 Today, it is a mature, cross-platform framework, that is built with the spirit of preserving XNA but adopting modern game development practices. Some popular titles created using MonoGame include [Celeste](https://store.steampowered.com/app/504230/Celeste/), [Stardew Valley](https://store.steampowered.com/app/413150/Stardew\_Valley/), and [Streets of Rage 4](https://store.steampowered.com/app/985890/Streets\_of\_Rage\_4/).
 
-<table style="border: transparent;">
-    <tr>
-        <td width="50%" align="center">
-            <figure><img src="./images/celeste.png" alt="Figure 1-1: Celeste."><figcaption><small>Figure 1-1: Celeste</small></figcaption></figure>
-        </td>
-        <td width="50%" align="center">
-            <figure><img src="./images/stardew-valley.png" alt="Figure 1-2: Stardew Valley."><figcaption><small>Figure 1-2: Stardew Valley.</small></figcaption></figure>
-        </td>
-    </tr>
-    <tr>
-        <td width="50%" align="center">
-            <figure><img src="./images/sor4.jpg" alt="Figure 1-3: Streets of Rage 4."><figcaption><p><small>Figure 1-3: Streets of Rage 4.</small></p></figcaption></figure>
-        </td>
-        <td width="50%">
-        </td>
-    </tr>
-</table>
+| ![Figure 1-1: Celeste](./images/celeste.png) | ![Figure 1-2: Stardew Valley](./images/stardew-valley.png) |
+| :---: | :---: |
+| **Figure 1-1 Celeste.** | **Figure 1-2: Stardew Valley** |
+| ![Figure 1-3: Streets of Rage 4](./images/sor4.jpg) | |
+| **Figure 1-3: Streets of Rage 4** | |
 
 ## Features
 
@@ -63,7 +51,7 @@ By providing cross-platform support, developers can target multiple platforms fr
 
 MonoGame is designed and built in C#. It is the official programming language supported in documentation, samples, and community discussion. However, MonoGame is not exclusively tied to C#. As a .NET library, MonoGame can be used with any .NET-compatible language including Visual Basic and F#.
 
-> [!CAUTION] 
+> [!CAUTION]
 > While the alternative .NET languages can be used, community support may be limited outside the scope of C#.
 
 Regardless of which .NET language used, developers should have a foundational understanding of the language and programming concepts such as:
@@ -83,7 +71,7 @@ Regardless of which .NET language used, developers should have a foundational un
 
     <details>
     <summary>Question 1 Answer</summary>
-    
+
     > Any of the following are advantages of using the MonoGame
     > 1. It provides cross-platform support, allowing developers to target multiple platforms from a single code base.
     >
@@ -93,12 +81,11 @@ Regardless of which .NET language used, developers should have a foundational un
 
     </details><br />
 
-
 2. What programming languages can be used when creating a game with MonoGame?
 
     <details>
     <summary>Question 2 Answer</summary>
-    
+
     > The primary language used is C#, which is the same language that the MonoGame framework is developed in.  However, any .NET language can be used, such as F# or Visual Basic.
-    
-    </details><br />
+
+    </details><br />

articles/tutorials/building_2d_games/02_getting_started/index.md

@@ -157,11 +157,15 @@ Now that you have your development environment setup, it's time to create your f
 
 After selecting *Create Project*, a new C# project will be created based on the MonoGame template we choose and opened automatically in VSCode.
 
-<figure><img src="./images/vscode.png" alt="Figure 2-1: A new MonoGame project after being created in Visual Studio Code"><figcaption><p><em>Figure 2-1: A new MonoGame project after being created in Visual Studio Code</em></p></figcaption></figure>
+| ![Figure 2-1: A new MonoGame project after being created in Visual Studio Code](./images/vscode.png) |
+| :---: |
+| **Figure 2-1: A new MonoGame project after being created in Visual Studio Code** |
 
 Now that we have the project created, press the `F5` key on your keyboard, or choose *Run > Start Debugging* from the top menu. If prompted for a configuration, choose *C#*. The project will compile and run, displaying a screen similar to the following
 
-<figure><img src="./images/cornflower-blue.png" alt="Figure 2-2: The default MonoGame cornflower blue game window."><figcaption><p><em>Figure 2-2: The default MonoGame cornflower blue game window.</em></p></figcaption></figure>
+| ![Figure 2-2: The default MonoGame cornflower blue game window](./images/cornflower-blue.png) |
+| :---: |
+| **Figure 2-2: The default MonoGame cornflower blue game window** |
 
 Be amazed, the default MonoGame Cornflower Blue game window. You have just created your very first MonoGame application. While there isn't much happening here visually, there is a log going on behind the scenes that the MonoGame framework is handling for you. When you ran the application, the following occurred:
 

articles/tutorials/building_2d_games/03_the_game1_file/index.md

@@ -72,7 +72,9 @@ This class provides the following structure:
 
 Figure 3-1 below shows the lifecycle of a MonoGame game including the [**Update**](xref:Microsoft.Xna.Framework.Game.Update(Microsoft.Xna.Framework.GameTime)) and [**Draw**](xref:Microsoft.Xna.Framework.Game.Draw(Microsoft.Xna.Framework.GameTime)) methods that make up the *game loop*.
 
-<figure><img src="./images/monogame-lifecycle.png" alt="Figure 3-1: Lifecycle of a MonoGame game."><figcaption><p><em>Figure 3-1: Lifecycle of a MonoGame game.</em></p></figcaption></figure>
+| ![Figure 3-1: Lifecycle of a MonoGame game](./images/monogame-lifecycle.png) |
+| :---: |
+| **Figure 3-1: Lifecycle of a MonoGame game** |
 
 ## Graphics and Rendering
 The graphics pipeline in monogame starts with two components: the [**GraphicsDeviceManager**](xref:Microsoft.Xna.Framework.GraphicsDeviceManager) and [**SpriteBatch**](xref:Microsoft.Xna.Framework.Graphics.SpriteBatch).
@@ -150,7 +152,9 @@ The [**Update**](xref:Microsoft.Xna.Framework.Game.Update(Microsoft.Xna.Framewor
 
 The first line is executing the [**Clear**](xref:Microsoft.Xna.Framework.Graphics.GraphicsDevice.Clear(Microsoft.Xna.Framework.Color)) method of the [**GraphicsDevice**](xref:Microsoft.Xna.Framework.Graphics.GraphicsDevice) property using the color [**CornflowerBlue**](xref:Microsoft.Xna.Framework.Color.CornflowerBlue). Recall that the [**GraphicsDevice**](xref:Microsoft.Xna.Framework.Graphics.GraphicsDevice) object is your direct interface between the game and what is rendered to the screen. Every time the [**Draw**](xref:Microsoft.Xna.Framework.Game.Draw(Microsoft.Xna.Framework.GameTime)) method is called, this line of code of erasing the contents of the game window and refilling it with the color specified. Without clearing the contents of the screen first, every draw call would draw the new frame render over top of the previous render, and you'd end up with something like the old solitaire win screen
 
-<figure><img src="./images/solitaire.webp" alt="Figure 3-2: Windows XP Solitaire Win Screen."><figcaption><p><em>Figure 3-2: Windows XP Solitaire Win Screen.</em></p></figcaption></figure>
+| ![Figure 3-2: Windows XP Solitaire Win Screen](./images/solitaire.webp) |
+| :---: |
+| **Figure 3-2: Windows XP Solitaire Win Screen** |
 
 While this can make for a neat effect, it is not something you want all the time. So, the screen is cleared and refilled with a solid color. You can test this yourself by modifying the code to use a different color, such as [**Color.MonoGameOrange**](xref:Microsoft.Xna.Framework.Color.MonoGameOrange), then running the game. (yes, there is a MonoGame Orange color).
 

articles/tutorials/building_2d_games/04_content_pipeline/index.md

@@ -28,7 +28,9 @@ On the other side of this coin, MonoGame offers the **Content Pipeline**; a work
 
 The following image illustrates this workflow:
 
-<figure><img src="./images/content-pipeline-workflow-full.png" alt="Figure 4-1: MonoGame Content Pipeline Workflow"><figcaption><p><strong>Figure 4-1: MonoGame Content Pipeline Workflow</strong></p></figcaption></figure>
+| ![Figure 4-1: MonoGame Content Pipeline Workflow](./images/content-pipeline-workflow-full.png) |
+| :---: |
+| **FigFigure 4-1: MonoGame Content Pipeline Workflowure** |
 
 For the same amount of steps, you also get the benefit of the assets being pre-processed and compiled to an optimized format for the target platform.  For instance, image files can be compiled using [DXT compression](https://en.wikipedia.org/wiki/S3\_Texture\_Compression), which is a format that is understood by GPUs without needing to be decompressed first, reducing the memory footprint.
 
@@ -39,7 +41,9 @@ For this tutorial series, we are going to focus on using the content pipeline wo
 
 To get started and to walk through the process, we'll start with loading an image file.  Right-click the following image of the MonoGame logo and save it named *logo.png* somewhere on your on your computer, such as your desktop.
 
-<figure><img src="./images/logo.png" alt="Figure 4-2: MonoGame Horizontal Logo"><figcaption><p><strong>Figure 4-2: MonoGame Horizontal Logo</strong></p></figcaption></figure>
+| ![Figure 4-2: MonoGame Horizontal Logo](./images/logo.png) |
+| :---: |
+| **Figure 4-2: MonoGame Horizontal Logo** |
 
 ## Opening the MGCB Editor
 
@@ -49,7 +53,9 @@ The *MonoGame Content Builder Editor (MGCB Editor)* is a GUI tool that can be us
 
 To open the *Content.mgcb* content project file in the MGCB Editor with Visual Studio Code, you can use the *MonoGame for VSCode* extension.  You should have installed this extension in [Chapter 02](../02_getting_started/index.md#installing-the-monogame-for-vscode-extension).  With this extension install, anytime you have a code file open, you will see the MonoGame logo in the top-right of the code window like below:
 
-<figure><img src="./images/mgcb-editor-icon.png" alt="Figure 4-3: MonoGame for VSCode extension icon"><figcaption><p><strong>Figure 4-3: MonoGame for VSCode extension icon</strong></p></figcaption></figure>
+| ![Figure 4-3: MonoGame for VSCode extension icon](./images/mgcb-editor-icon.png) |
+| :---: |
+| **Figure 4-3: MonoGame for VSCode extension icon** |
 
 Clicking the MonoGame logo here will open the *Content.mgcb* content project file from the current project in the MGCB Editor.
 
@@ -68,7 +74,9 @@ To open the *Content.mgcb* content project file in the MGCB Editor using the dot
 
 Once you have the *Content.mgcb* content project file for your game project opened in the MGCB Editor, you should see a window similar to the following:
 
-<figure><img src="./images/mgcb-editor.png" alt="Figure 4-4: MonoGame Content Builder Editor (MGCB Editor) Window"><figcaption><p><strong>Figure 4-4: MonoGame Content Builder Editor (MGCB Editor) Window</strong></p></figcaption></figure>
+| ![Figure 4-4: MonoGame Content Builder Editor (MGCB Editor) Window](./images/mgcb-editor.png) |
+| :---: |
+| **Figure 4-4: MonoGame Content Builder Editor (MGCB Editor) Window** |
 
 ## Adding Assets in the MGCB Editor
 
@@ -83,7 +91,9 @@ Now that the *Content.mgcb* content project file is opened in the MGCB Editor, w
 
 After adding an existing file, you will be prompted with a pop-up asking if you would like to *Copy the file to the directory* or *Add a link*.
 
-<figure><img src="./images/add-file-popup.png" alt="Figure 4-5: Add Existing File Popup"><figcaption><p><strong>Figure 4-5: Add Existing File Popup</strong></p></figcaption></figure>
+| ![Figure 4-5: Add Existing File Popup](./images/add-file-popup.png) |
+| :---: |
+| **Figure 4-5: Add Existing File Popup** |
 
 For the purposes of this tutorial, choose the *Copy the file to the directory* option, then click the *Add* button.  When adding existing files in the future, the choice between copying the file and adding a link can make a big difference:
 
@@ -93,7 +103,9 @@ For the purposes of this tutorial, choose the *Copy the file to the directory* o
 
 After adding the *logo.png* file, your project node should look similar to the following:
 
-<figure><img src="./images/mgcb-logo-added.png" alt="Figure 4-6: Logo image added to the MGCB Editor"><figcaption><p><strong>Figure 4-6: Logo image added to the MGCB Editor</strong></p></figcaption></figure>
+| ![Figure 4-6: Logo image added to the MGCB Editor](./images/mgcb-logo-added.png) |
+| :---: |
+| **Figure 4-6: Logo image added to the MGCB Editor** |
 
 After changes have been made in the MGBC Editor, ensure that you save the changes.  They are not automatically saved, though you will be warned if you close the editor and haven't saved changes. You can tell that changes have not been saved by looking at the title bar of the MGCB editor window.  If it has an '*' at the end of the window title, this means changes have not been saved.  To save changes, you can perform one of the following:
 
@@ -172,7 +184,9 @@ The key changes we made here are
 
 Running the game now will show the MonoGame logo displayed in the upper-left corner of the game window.
 
-<figure><img src="./images/logo-drawn.png" alt="Figure 4-7: The MonoGame logo drawn to the game window."><figcaption><p><strong>Figure 4-7: The MonoGame logo drawn to the game window.</strong></p></figcaption></figure>
+| ![Figure 4-7: The MonoGame logo drawn to the game window](./images/logo-drawn.png) |
+| :---: |
+| **Figure 4-7: The MonoGame logo drawn to the game window** |
 
 ## Conclusion