Document additional markdown features.

Adds image caption capabilities and documents missing HTML extensions
available.

2 files changed, 46 insertions, 0 deletions

diff --git a/pydis_site/apps/content/resources/guides/pydis-guides/how-to-contribute-a-page.md b/pydis_site/apps/content/resources/guides/pydis-guides/how-to-contribute-a-page.md
index 303a2c0f..67666428 100644
--- a/pydis_site/apps/content/resources/guides/pydis-guides/how-to-contribute-a-page.md
+++ b/pydis_site/apps/content/resources/guides/pydis-guides/how-to-contribute-a-page.md
@@ -159,3 +159,29 @@ import os
 
 path = os.path.join("foo", "bar")
 ```
+
+---
+
+### HTML Attributes
+To add HTML attributes to certain lines/paragraphs, [see this page](https://python-markdown.github.io/extensions/attr_list/#the-list) for the format and where to put it.
+
+This can be useful for setting the image size when adding an image using markdown (see the [Image Captions](#image-captions) section for an example), or for adding bulma styles to certain elements (like the warning notification [here](/pages/guides/pydis-guides/contributing/sir-lancebot#setup-instructions)).  
+**This should be used sparingly, as it reduces readability and simplicity of the article.**
+
+---
+
+### Image Captions
+To add an image caption, place a sentence with italics *right below* the image link
+
+**Markdown:**
+```nohighlight
+![Summer Code Jam 2020](/static/images/events/summer_code_jam_2020.png){: width="400" }
+*Summmer Code Jam 2020 banner with event information.*
+```
+
+**Output:**
+
+![Summer Code Jam 2020](/static/images/events/summer_code_jam_2020.png){: width="400"}
+*Summer Code Jam 2020 banner with event information.*
+
+> Note: To display a regular italicized line below an image, leave an empty line between the two.
diff --git a/pydis_site/static/css/content/page.css b/pydis_site/static/css/content/page.css
index 57d7472b..97b297b2 100644
--- a/pydis_site/static/css/content/page.css
+++ b/pydis_site/static/css/content/page.css
@@ -29,3 +29,23 @@ code.hljs {
 :is(h1, h2, h3, h4, h5, h6):hover > .headerlink {
     display: inline;
 }
+
+/*
+ * Display <em> tags immediately following <img> tags like figure subcaptions.
+ * Note: There must not be a newline between the image and the italicized line
+ * for this to work. Otherwise, it's regular markdown.
+ *
+ * Image caption:
+ *
+ * ![Title](Source)
+ * *This is my caption.*
+ *
+ */
+img + em {
+    /* Place the caption on it's own line */
+    display: block;
+    white-space: pre;
+
+    /* Style */
+    font-size: .875em;
+}