dibaca 6 menit

Markdown syntax guide

Daftar Isi

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 -->



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
  1. Item 1
  2. Item 2
    1. Sub item 1
    2. Sub item 2
  3. 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)

X-Wing Starfighter

Public Image

Use the ![altText](/image.*) pattern relative to the public folder. No period.

![Y-Wing Starfighter](/y-wing.jpeg)

Y-Wing Starfighter

External Image

Use the ![altText](url) pattern.

![Naboo N-1 Starfighter](https://raw.githubusercontent.com/trevortylerlee/n1/main/n1.jpeg)

Naboo N-1 Starfighter


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 |
ItemCount
X-Wing1
Y-Wing2
A-Wing3

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.


Footnotes

  1. This is the first footnote. ↩

  2. This is the second footnote. ↩