This page contains useful formatting tips when editing pages.
Full documentation can be found Here
¶ Dot Unicode Character
Instead of
- one
- two
- three
You can do
• one
• two
• three
Just copy/paste the dot, doing it this way helps issues where normal bullets break the formatted quote boxes.
¶ Using highlighting
The following inline code blocks represent how to make text different colors.
Red: <span style="color: red;">Red</span>
Blue: <span style="color: blue;">Blue</span>
Green: <span style="color: green;">Green</span>
Yellow: <span style="color: yellow;">Yellow</span>
Purple: <span style="color: purple;">Purple</span>
Orange: <span style="color: orange;">Orange</span>
Pink: <span style="color: pink;">Pink</span>
Brown: <span style="color: brown;">Brown</span>
Black: <span style="color: black;">Black</span>
Gray: <span style="color: gray;">Gray</span>
White: <span style="color: white;">White</span>
Cyan: <span style="color: cyan;">Cyan</span>
Magenta: <span style="color: magenta;">Magenta</span>
Lime: <span style="color: lime;">Lime</span>
Teal: <span style="color: teal;">Teal</span>
Indigo: <span style="color: indigo;">Indigo</span>
Violet: <span style="color: violet;">Violet</span>
Maroon: <span style="color: maroon;">Maroon</span>
Navy: <span style="color: navy;">Navy</span>
Gold: <span style="color: gold;">Gold</span>
Silver: <span style="color: silver;">Silver</span>
Beige: <span style="color: beige;">Beige</span>
Salmon: <span style="color: salmon;">Salmon</span>
Tomato: <span style="color: tomato;">Tomato</span>
Khaki: <span style="color: khaki;">Khaki</span>
Lavender: <span style="color: lavender;">Lavender</span>
MistyRose: <span style="color: mistyrose;">MistyRose</span>
Coral: <span style="color: coral;">Coral</span>
Orchid: <span style="color: orchid;">Orchid</span>
Wheat: <span style="color: wheat;">Wheat</span>
¶ Making tabbed sections
# Tabs {.tabset}
## First Tab
Any content here will go into the first tab...
## Second Tab
Any content here will go into the second tab...
## Third Tab
Any content here will go into the third tab...
Result:
Any content here will go into the first tab...
Any content here will go into the second tab...
Any content here will go into the third tab...
¶ Creating tables
| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Foo | Bar | Xyz |
| Abc | Def | 123 |
{.dense}
Result:
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Foo | Bar | Xyz |
| Abc | Def | 123 |
the {.dense} part makes the table compact.
¶ Creating task lists
- [x] Checked task item
- [x] Another checked task item
- [ ] Unchecked task item
Result:
- Checked task item
- Another checked task item
- Unchecked task item
¶ Attaching images
There are two ways to attach images
- Markdown
- HTML
¶ Markdown
If you want to resize it: add ` =100x100` to the end of the link
Example (make sure to include the space!)
¶ HTML
<figure style="text-align: center;">
<img src="https://i.imgur.com/opvTLoo.png" alt="Description" style="width: 100%; max-width: 600px;" />
<figcaption style="color: #b9bbbe;">You can place a caption here</figcaption>
</figure>
# With this its easier to center the image (or align it differently)
¶ Making footnotes
This sentence[^1] needs a few footnotes.[^2]
[^1]: A string of syntactic words.
[^2]: A useful example sentence.
Result:
This sentence[1] needs a few footnotes.[2]