Headings
To create headings, use hash symbols (#) followed by a space. The number of hash symbols indicates the heading level.
Use h2
tags instead of h1
tags in the post. Too many h1
tags on a single
page can impact SEO. The post title serves as the h1
.
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraphs
To create paragraphs, use a blank line to separate one or more lines of text.
<!-- empty line -->
I love Star Wars.
<!-- empty line -->
My favourite is Episode III – Revenge of the Sith.
<!-- empty line -->
I love Star Wars.
My favourite is Episode III – Revenge of the Sith.
Italic
Use one asterisk (*) or underscore (_) to italicize text.
I *love* Star Wars.
My _favourite_ is Episode III – Revenge of the Sith.
I love Star Wars. My favourite is Episode III – Revenge of the Sith.
Bold
Use two asterisks (*) or underscores (_) to bold text.
I **love** Star Wars.
My __favourite__ is Episode III – Revenge of the Sith.
I love Star Wars. My favourite is Episode III – Revenge of the Sith.
Italic and Bold
Use three asterisks (*) or underscores (_) to both bold and italicize text.
I ***love*** Star Wars.
My ___favourite___ is Episode III – Revenge of the Sith.
I love Star Wars. My favourite is Episode III – Revenge of the Sith.
Horizontal Rule
Use three hyphens (-), asterisks (*), or underscores (_) to create a horizontal rule.
<!-- empty line -->
---
<!-- empty line -->
***
<!-- empty line -->
___
<!-- empty line -->
Links
To create a link, the link text in brackets ([]) and then follow it immediately with the URL in parentheses (()).
Micro is a fork of [astro-nano](https://github.com/markhorn-dev/astro-nano).
Micro is a fork of astro-nano.
Ordered Lists
To create an ordered list, add line items with numbers followed by periods. Use an indent to create a nested list.
1. Item 1
2. Item 2
1. Sub item 1
2. Sub item 2
3. Item 3
- Item 1
- Item 2
- Sub item 1
- Sub item 2
- Item 3
Unordered List
To create an unordered list, add a hyphen (-), an asterisk (*), or a plus sign (+) in front of line items. Don’t mix. Use an indent to create a nested list.
- Item 1
- Item 2
- Sub item 1
- Sub item 2
- Item 3
- Item 1
- Item 2
- Sub item 1
- Sub item 2
- Item 3
Images
To add an image, add an exclamation mark (!), followed by alt text in brackets ([]), and the path or URL to the image asset in parentheses.
![altText](pathToImage)
Relative
Use the ![altText](./image.*)
pattern relative to the same folder as the markdown file. Notice the period.
![X-Wing Starfighter](./x-wing.jpeg)
Public Image
Use the ![altText](/image.*)
pattern relative to the public folder. No period.
![Y-Wing Starfighter](/y-wing.jpeg)
External Image
Use the ![altText](url)
pattern.
![Naboo N-1 Starfighter](https://raw.githubusercontent.com/trevortylerlee/n1/main/n1.jpeg)
Blockquotes
To add a blockquote add the greater-than character (>) before a paragraph. For multi-line blockquotes, add additional greater-than character for each line and include an empty spacer line.
> So this is how liberty dies...
>
> with thunderous applause.
So this is how liberty dies…
with thunderous applause.
Strikethrough
Use a tilde (~) symbol to strikethrough text.
~I don't like sand.~ It's coarse and rough and irritating.
I don’t like sand. It’s coarse and rough and irritating.
Subscript
Use the <sub>
tag to denote subscript.
H<sub>2</sub>O
H2O
Superscript
Use the <sup>
tag to denote superscript.
E=mc<sup>2</sup>
E=mc2
Keyboard
Use the <kbd>
tag to denote keys on the keyboard.
<kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Delete</kbd>
CTRL + ALT + Delete
Abbreviate
Use the <abbr>
tag to denote abbreviation.
<abbr title="Graphics Interchange Format">GIF</abbr>
GIF
Highlight
Use the <mark>
tag to denote highlighted text.
Do or do not. <mark>There is no try.</mark>
Do or do not. There is no try.
Task Lists
Combine a list with square brackets ([]) representing a checkbox. Typing x
inside the brackets marks the task as complete.
- [x] Build a lightsaber
- [ ] Pass the Jedi Trials
- [ ] Train a padawan
- Build a lightsaber
- Pass the Jedi Trials
- Train a padawan
Tables
Use three or more hyphens (-) for the column headers and use pipes (|) to separate each column. You can align text in the columns to the left, right, or center by adding a colon (:) to the left, right, or on both side of the hyphens.
| Item | Count |
| :----- | ----: |
| X-Wing | 1 |
| Y-Wing | 2 |
| A-Wing | 3 |
Item | Count |
---|---|
X-Wing | 1 |
Y-Wing | 2 |
A-Wing | 3 |
Footnotes
Add a caret (^) and an identifier inside brackets ([^1]). Identifiers can be numbers or words but can’t contain spaces or tabs.
Here's a footnote, [^1] and here's another one. [^2]
[^1]: This is the first footnote.
[^2]: This is the second footnote.
Here’s a footnote, 1 and here’s another one. 2
See the bottom of this page to view the footnotes.
Code
To denote a word or phrase as code, enclose it in backticks (`).
`package.json`
package.json
Code Blocks
Denote a code block by wrapping a section of valid code in triple backticks (`). To enable syntax highlighting, type the shorthand symbol for the language after the first three backticks. Reference for shorthand symbols.
```js
function hello() {
console.log("hello world");
}
```
function hello() {
console.log("hello world");
}
Conclusion
Refer to markdownguide.org for best practices as well as extended syntax.