Merge pull request #833 from kkrypt0nn/main

Update ANSI guide with new pictures, formatting & titles

3 files changed, 17 insertions, 6 deletions

diff --git a/pydis_site/apps/content/resources/guides/python-guides/discord-messages-with-colors.md b/pydis_site/apps/content/resources/guides/python-guides/discord-messages-with-colors.md
index 62ff61f9..0e88490e 100644
--- a/pydis_site/apps/content/resources/guides/python-guides/discord-messages-with-colors.md
+++ b/pydis_site/apps/content/resources/guides/python-guides/discord-messages-with-colors.md
@@ -3,9 +3,10 @@ title: Discord Messages with Colors
 description: A guide on how to add colors to your codeblocks on Discord
 ---
 
-Discord is now slowly rolling out the ability to send colored text within code blocks. This is done using ANSI color codes which is also how you print colored text in your terminal.
+Discord is now *slowly rolling out* the ability to send colored messages within code blocks. It uses the ANSI color codes, so if you've tried to print colored text in your terminal or console with Python or other languages then it will be easy for you.
 
-To send colored text in a code block you need to first specify the `ansi` language and use the prefixes similar to the one below:
+## Quick Explanation
+To be able to send a colored text, you need to use the `ansi` language for your code block and provide a prefix of this format before writing your text:
 ```ansi
 \u001b[{format};{color}m
 ```
@@ -13,15 +14,17 @@ To send colored text in a code block you need to first specify the `ansi` langua
 
 After you've written this, you can now type the text you wish to color. If you want to reset the color back to normal, then you need to use the `\u001b[0m` prefix again.
 
+## Formats
 Here is the list of values you can use to replace `{format}`:
 
 * 0: Normal
 * 1: **Bold**
 * 4: <ins>Underline</ins>
 
+## Colors
 Here is the list of values you can use to replace `{color}`:
 
-*The following values will change the **text** color.*
+### Text Colors
 
 * 30: Gray
 * 31: Red
@@ -32,7 +35,7 @@ Here is the list of values you can use to replace `{color}`:
 * 36: Cyan
 * 37: White
 
-*The following values will change the **text background** color.*
+### Background Colors
 
 * 40: Firefly dark blue
 * 41: Orange
@@ -43,7 +46,9 @@ Here is the list of values you can use to replace `{color}`:
 * 46: Light gray
 * 47: White
 
-Let's take an example, I want a bold green colored text with the very dark blue background.
+## Example
+
+Let's take an example, I want a bold green colored text with the firefly dark blue background.
 I simply use `\u001b[0;40m` (background color) and `\u001b[1;32m` (text color) as prefix. Note that the order is **important**, first you give the background color and then the text color.
 
 Alternatively you can also directly combine them into a single prefix like the following: `\u001b[1;40;32m` and you can also use multiple values. Something like `\u001b[1;40;4;32m` would underline the text, make it bold, make it green and have a dark blue background.
@@ -61,8 +66,14 @@ Result:
 
 ![Background and text color result](/static/images/content/discord_colored_messages/result.png)
 
+### ANSI Colors Showcase
+
 The way the colors look like on Discord is shown in the image below:
 
 ![ANSI Colors](/static/images/content/discord_colored_messages/ansi-colors.png)
 
-Note: If the change as not been brought to you yet, or other users, then you can use other code blocks in the meantime to get colored text. See **[this gist](https://gist.github.com/matthewzring/9f7bbfd102003963f9be7dbcf7d40e51)**.
+*Message sent to get the output of above can be found [here](https://gist.github.com/kkrypt0nn/a02506f3712ff2d1c8ca7c9e0aed7c06#file-ansi-colors-showcase-md).*
+
+#### Disclaimer
+
+***Note**: The change has been brought to all stable desktop clients. Since syntax highlighting on mobile is far behind, ANSI is not supported on mobile as well. Refer to [this gist](https://gist.github.com/matthewzring/9f7bbfd102003963f9be7dbcf7d40e51) for other syntax highlighting methods.*
diff --git a/pydis_site/static/images/content/discord_colored_messages/ansi-colors.png b/pydis_site/static/images/content/discord_colored_messages/ansi-colors.png
index d7176393..d980ab4c 100644
--- a/pydis_site/static/images/content/discord_colored_messages/ansi-colors.png
+++ b/pydis_site/static/images/content/discord_colored_messages/ansi-colors.png
diff --git a/pydis_site/static/images/content/discord_colored_messages/result.png b/pydis_site/static/images/content/discord_colored_messages/result.png
index a666804e..41ed555c 100644
--- a/pydis_site/static/images/content/discord_colored_messages/result.png
+++ b/pydis_site/static/images/content/discord_colored_messages/result.png