The Yawning Abyss Markdown Cheet Sheet
Between flavours of Markdown, and Hugo specific site codes, I need a personal cheat sheet.
These are the things I need to know when writing for this site.
Basic Markdown Syntax
Headings
# Level 1 - only these will appear in post table of contents
## Level 2
#### Level 3
## Heading with a Link ID {#link-to-this-heading}
Now I can [link to it](#link-to-this-heading "with a tooltip")
Paragraphs
Two returns are needed to start a new paragraph.
This will appear as a single paragraph.
Line breaks can be added by ending a line with 2 spaces.<space><space>
Text Formatting
**bold text**
__bold text__
*italic text*
*italic text*
~~strikethrough~~
Links
<http://example.com> will turn into links automatically.
[link text](https://example.com "with a tooltip")
Images
{{<
figure_avif
image="image_file.jpg"
alt="Alternate text if the image is not displayed"
caption="Optional caption under the picture"
class="imagealigncenter"
width=100
>}}
- class [optional] can be:
- imagealignleft
- imagealigncenter
- imagealignright
- width and height [optional] can be
- A number of pixels
width=100
- A percentage -
width=75%
- A number of pixels
If the width is 100% then the class aligns the caption and the image takes up the full width of the page.
The standard Markdown and Hugo shortcodes work as well.
![alt text](/img/drg_logo.jpg "Floating Tool Tip")
{{< figure
src="image.jpg"
alt="Alternate text if image is not displayed"
title="Title as part of the caption"
caption="A caption under the image"
class="alignright"
width=100%
>}}
Blockquotes
> Having a > before a paragraph makes the paragraph a blockquote
> To have multiple paragraphs in one blockquote.
>
> Leave a > on blank lines between the paragraphs.
Horizontal Rules
--- (3 dashes)
*** (3 asterix)
___ (3 underscores)
Unordered Lists
* bullet list items start with
* asterisk
* dash
* or a plus sign
+ do not mix and match
+ which one you use
- it all comes down to your preference
- which is the easiest for you to remember and type
* [x] checklists can be created as well
* [ ] and items can be unchecked, checked, or without a checkbox
* Like this one
Ordered Lists
1. Add a number and a period before list items.
5. The first number should be 1 – after that it doesn’t matter.
1. The numbers used do not have to be in order or in sequence.
1. The list will be in the order it is typed.
1. sub lists just need to be indented.
Code
To format a portion of a line as `code` use backticks.
To start each line
will create a code
block.
```
This is all rendered as code
and not merged into paragraphs.
I typically use ~~~ instead of backticks.
```
Highlighted Code Block
~~~ C
#include <stdio.h>
int main() {
// printf() displays the string inside quotation
printf("Hello, World!");
return 0;
}
~~~
Tables
| Left aligned | Center | Right |
| :--- | :---: | ---: |
| item 1 | item 2 | item 3 |
Columns do not need to be aligned
| heading1 | Heading 2
| --- | ---- |
| Item1 | Item2 |
| Entry1 | Entry 2 |
Definitions
Thing to be define
: The definition for the thing to be defined
Something with multiple definitions
: The first definition
: The second one
Footnotes
You can refer to a footnote by number[^1] or by name[^longnote]
Then you can place footnotes elsewhere in the post.
[^1]: This will appear in the text where you put it. It does not need to be at the bottom of the file or page.
[^longnote]: You can have a much longer note.
Just indent the contents after the opening paragraph.
The note will continue until the next line that isn’t indented.
Emoji shortcodes
You can use emoji such as :eggplant
: , :tomato
: , and :clubs
: . The keywords are placed between a pair of colons.
Audio shortcode
You can place an mp3 in a post with:
{{<
audio
src="filename.mp3"
caption="title above player"
class="imagealigncenter"
>}}
The class only applies to the caption above the audio player and not the entire audio player.