Markdown Reference

Markdown is how content is written for this template. This document serves as a reference on the features supported by the Markdown processor.

It is recommended to view this page from the website, as it both shows the lines of code and what they output.

Headings

This is what headings look like:

Heading 1

Heading 2

Heading 3

# Heading 1

## Heading 2

### Heading 3

All Markdown headings are clickable, to help make it easier to link to sections on a page.

Important

An <h1> tag is automatically created for every page, and should not be used. It is only used on this page for demonstratative purposes.

Text

Note

The text below may not show changes. Not all fonts support bolded or italicized text.

This is what normal text looks like.

This is what normal text looks like.

Italics

This is italicized text.

This is also italiczed text.

*This is italicized text.*

_This is also italiczed text._

Bold

This is bolded text

This is also bolded text.

**This is bolded text**

__This is also bolded text.__

Italics and Bold

This is both italcized and bolded text.

This is both italcized and bolded text.

Strikethrough

crossed out text

~~crossed out text~~

Superscript and Subscript

H20, 29th

H~2~0, 29^th^

Lists

Markdown by default supports both unordered and ordered lists.

Unordered

  • This is an unordered list.
  • There are no numbers on the side.
  • Bottom text.
- This is an unordered list.
- There are no numbers on the side.
- Bottom text.

Ordered

  1. This is an ordered list.
  2. There is a number/positiong marking beside each item in the list.
  3. Bottom Text.
1. This is an ordered list.
2. There is a number/positiong marking beside each item in the list.
3. Bottom Text.

  1. This is an ordered list with a different starting number.
  2. Ordered lists do not need to start on one.
  3. Additionally, the numbers on an ordered list (except for the first) are ignored when parsed.
  4. (This is why the numbers jump from 200 and 300).
15. This is an ordered list with a different starting number.
16. Ordered lists do not need to start on one.
200. Additionally, the numbers on an ordered list (except for the first) are ignored when parsed.
300. (This is why the numbers jump from 200 and 300).

Checklist/To Do

There's also checklists.

- [x] Completed task
- [ ] Incomplete task
- [ ] Another task

Tables

Channel Type
01 Piano/Keyboard
02 Lead 1 (Primary)
03 Lead 2 (Secondary)
| Channel | Type               |
|---------|--------------------|
| 01      | Piano/Keyboard     |
| 02      | Lead 1 (Primary)   |
| 03      | Lead 2 (Secondary) |

Here's a bigger table with more features

Tables Are Cool
col 1 is left-aligned $1600
col 2 is centered $12
col 3 is right-aligned $1
| Tables   |      Are      |  Cool |
|----------|:-------------:|------:|
| col 1 is |  left-aligned | $1600 |
| col 2 is |    centered   |   $12 |
| col 3 is | right-aligned |    $1 |

Footnotes

A standard footnote has two features; an indentifier, and the content of the footnote.

My favorite color is purple.[1]

My favorite color is purple.[^color-or-colour]

[^color-or-colour]: *favourite, *color

Footnotes can even be written before they're called.[2]

[^footnote-before-reference]: This footnote is written earlier before it's referenced.

Footnotes can even be written before they're called.[^footnote-before-reference]

(I don't recommend you do this, though.)

Multi-Line

Footnotes can be written over multiple lines.[3]

Footnotes can be written over multiple lines.[^long-note]

[^long-note]: This is the first paragraph.

	This is the second paragraph. I'm intended to signal that I'm a part of the footnote.

Inline Notes

Here is an inline note.[4]

Here is an inline note.^[This is the contents of an inline note.]

Inline notes are automatically assigned an id, and cannot be manually given one.

Horizontal Line

You can use horizontal lines to separate content, although it isn't recommended.

The actual requirements to make a horizontal line are very lenient; minimum three asterisks or dashes in a line, with the option to have spaces inbetween.






---

***

* * *

****

- - -

********************

Emoji Shortcodes

â¤ī¸ Emojis! ⭐ 🌟

:heart: Emojis! :star: :star2:

(yes, i added this.)

The full list of emojis can be found here.

In the event that gist gets taken down, you can find the actual source code (less readable) over here.

Emoticons

There's also shortcuts for emoticons to automatically convert to their emoji counterparts.

😛 😊 😗 💔

:P :") :* </3

The list is shorter, so you can just check out the source code.

Warning

Shortcuts may not always render, and using them may cause conflicts depending on the characters being used.

<//3

<//3

Containers, Admonitions, Callouts, Alerts, etc.

Containers, Admonitions, Callouts are all semi-related concepts that essentially allow you to wrap Markdown text in HTML code to add custom styling.

Github Alerts

GitHub alerts are a collection of five different blocks you can show to highlight relevant information on a topic. They're often used on code-related documentation due to being directly integrated with GitHub's site.

Note

Highlights information that users should take into account, even when skimming.

Tip

Optional information to help a user be more successful.

Important

Crucial information necessary for users to succeed.

Warning

Critical content demanding immediate user attention due to potential risks.

Caution

Negative potential consequences of an action.

> [!NOTE]
> Highlights information that users should take into account, even when skimming.

> [!TIP]
> Optional information to help a user be more successful.

> [!IMPORTANT]
> Crucial information necessary for users to succeed.

> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.

> [!CAUTION]
> Negative potential consequences of an action.

Admonition

Admonitions function similarly to alerts, but are not limited to a select five types. They are created with a triple exclamation mark (!!!).

!!! admonition_type TEXT YOU SEE ON SCREEN
test

will render to:

TEXT YOU SEE ON SCREEN

test rawr

In this project, all admonitions are given a base style. To have custom admonitions, you need to update the CSS to render them differently.

Containers

Containers have the most control out of all the markdown-in-html wrappers, but they must be explicitely defined, otherwise they won't render. They function similarly to admonitions, but without the title it has.

Invalid containers look something like this:

::: container_that_doesn't_exist Contents of container. :::

::: container_that_doesn't_exist
Contents of container.
:::

Valid containers (that have not been styled and have the default configuration) will look like this:

Valid container.

::: example
Valid container.
:::

The documentation for this project's containers is located at the components page.


  1. *favourite, *color â†Šī¸Ž

  2. This footnote is written earlier before it's referenced. â†Šī¸Ž

  3. This is the first paragraph.

    This is the second paragraph. I'm intended to signal that I'm a part of the footnote. â†Šī¸Ž

  4. This is the contents of an inline note. â†Šī¸Ž