From 8b68a5a4ce7ff33d76d10a980087048a73764b29 Mon Sep 17 00:00:00 2001 From: kosayoda Date: Mon, 29 Mar 2021 15:25:53 +0800 Subject: Document additional markdown features. Adds image caption capabilities and documents missing HTML extensions available. --- .../pydis-guides/how-to-contribute-a-page.md | 26 ++++++++++++++++++++++ 1 file changed, 26 insertions(+) (limited to 'pydis_site/apps') 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. -- cgit v1.2.3