MARKDOWN
¶ Formatting Toolbar
- Most markdown codes can be reached by selecting some text, then using the formatting toolbar.
- Use special formatting when it adds information to your writing.
- Don't use special formatting if it distracts from writing your text. Add it later.
¶ Markdown Reference
¶ Headers
- Use headers in numerical order to create an automatic table of contents for your page.
¶ Example
# Big Topic
Users can navigate with these.
## Section
Subsections also appear in the contents.
### Item or Process
Use these for important items in the section.
¶ Bold & Italic
- Try to use bold and italic consistently to mean only one thing each.
¶ Example
Write something in stars for italic and double stars for bold.
Write something in stars for *italic* and double stars for **bold**.
¶ Automatically Numbered Lists
- Use automatically numbered lists for things that happen in order.
- Start each item with
1.to number from 1. - Start a list with a different number and a
.to automatically number from there.
¶ Example 1
Starting from one.
- Write each item starting with
1.Add a space after the.before the item. - Start all items with
1.They're numbered automatically. - Add other items anywhere and start them with
1.
1. Write each item starting with `1.` Add a space after the `.` before the item.
1. Start all items with `1.` They're numbered automatically.
1. Add other items anywhere and start them with `1.`
¶ Example 2
Starting from another number or continuing a list later.
- This list starts with
4. - The next item is numbered correctly.
- Start all items after the first with
1.
4. This list starts with `4.`
1. The next item is numbered correctly.
1. Start all items after the first with `1.`
¶ Bulleted Lists
- Use a bulleted list when the order doesn't matter.
¶ Example
- Write each item starting with
-. - Add a space after the
-before the item.
-- To indent, start with--
- Write each item starting with `-`.
- Add a space after the `-` before the item.
-- To indent, start with `--`
¶ Info Blocks
- Five types of info blocks are available to emphasize important parts of your text.
- Start the block with
>. - For colored highlighting, end with
{.is-info},{.is-success},{.is-warning}, or{.is-danger}.
¶ Example
Quote
Info
Success
Warning
Danger
> Quote
> Info
{.is-info}
> Success
{.is-success}
> Warning
{.is-warning}
> Danger
{.is-danger}
¶ Tabs
Information in tabs is only visible when the user clicks the tab.
- Write
{.tabset}after any header to begin creating tabs. - The
{.tabset}header does not appear on the page. - Each header in the lower levels after the
{.tabset}becomes a tab.
¶ Example
- This is the content of tab 1.
- This is the content of tab 2.
¶ Back Quote
- Use
back-quotesyntax to quote examples from your product or user interface.
¶ Example
Write something inside back-quote symbols to highlight it.
Write something inside `back-quote` symbols to highlight it.
¶ Keyboard
- Use the Keyboard syntax to show buttons that users should press.
¶ Example 1
Show a keyboard symbol or on-screen button.
Wrap something in kbd tags to give it a black keyboard surround.
Wrap something in <kbd>kbd</kbd> tags to give it a black keyboard surround.
¶ Example 2
Use CSS to customize the keyboard symbol.
Use CSS to make a big blue Shift key.
Use CSS to make a <kbd style="background-color:blue;font-size:large;">Big Blue Button</kbd>.
¶ Icons
- Use icons when they relate to your product.
- Write an
<i>tag withclass="fas fa-icon-name"to select a FontAwesome icon icon. - Write an
<i>tag withclass="mdi mdi-icon-name"to select an MDI icon icon.
¶ Example 1
Use an icon in text.
Write an <i> tag to include icons.
Write an `<i>` tag to include <i class="fas fa-heart" style="color:red"></i> icons.
¶ Buttons
- Use buttons to help identify elements in your interface.
¶ Example 1
Button with text.
<button type="button" class="ml-3 mr-0 my-0 radius-7 v-btn v-btn--contained theme--dark v-size--large black darken-2"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate v-icon--left mdi mdi-close theme--dark red--text"></i><span>CLOSE</span></span></button>
¶ Example 2
Button with icon only.
<button type="button" class="ml-3 mr-0 my-0 radius-7 v-btn v-btn--contained theme--dark v-size--large green"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate v-icon--center mdi mdi-check theme--dark white--text"></i></span></button>
¶ Example 3
Square button.
<button type="button" class="ml-3 mr-0 my-0 radius-0 v-btn v-btn--contained theme--dark v-size--large black darken-2"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate v-icon--left mdi mdi-close theme--dark red--text"></i><span>CLOSE</span></span></button>
¶ Example 4
Round button.
<button type="button" class="ml-3 mr-0 my-0 radius-20 v-btn v-btn--contained theme--dark v-size--large blue darken-2" style="min-width:44px;padding-left:0px;padding-right:0px;"><span class="v-btn__content"><i aria-hidden="true" class="v-icon notranslate v-icon--center mdi mdi-phone theme--dark white--text"></i></span></button>
¶ Emoji
- Write
:emoji-name:to include
emoji. - See the emoji cheat sheet to find the
emoji-name.
¶ Example
Spanish card decks don't use the same 
symbols as American decks.
Spanish card decks don't use the same :spades: :hearts: :clubs: :diamonds: symbols as American decks.
¶ Code Blocks
- Use code blocks to show complex syntax or instructions and enable block copy and paste. After the first set of
```, you can specify an optional language code to add automatic syntax highlighting.
¶ Example
<img src="/files/myfile.png" style="width:500px">
<b>Some text</b>
```html
<img src="/files/myfile.png" style="width:500px">
<b>Some text</b>
```
¶ Tables
- Use tables to organize information into rows and columns.
- Separate columns in the table with
|. - A header row is required to begin the table.
- In the 2nd row, write
---in every column. - Optionally, add
:characters in the 2nd row to control text alignment.
-- Use:---for left,:---:for center, and---:for right alignment. - Optionally, align the
|symbols.
¶ Example 1
Simple table.
| Number | Symbol | Name |
|---|---|---|
| 1 | H | Hydrogen |
| 2 | He | Helium |
| 3 | Li | Lithium |
| Number | Symbol | Name |
| --- | --- | --- |
| 1 | H | Hydrogen |
| 2 | He | Helium |
| 3 | Li | Lithium |
¶ Example 2
Table with column alignments.
| Region | Name | Sales |
|---|---|---|
| Northwest | Perkins | $2,220,437.00 |
| Pacific | Williams-Sonora | $873,841.00 |
| South | Permian | 3,272,918.00 |
| Region | Name | Sales |
| :--- | :---: | ---: |
| Northwest | Perkins | $2,220,437.00 |
| Pacific | Williams-Sonora | $873,841.00 |
| South | Permian | 3,272,918.00 |