마크다운 문법(Markdown syntax) 정리

하랑·2020년 11월 27일
0

정리

목록 보기
1/2
post-thumbnail

본 문서는 마크다운 가이드를 참고하여 작성했습니다.

안녕하세요. 이제 막 블로그를 시작하여 첫 글을 쓰고있는 꼬맹이임니당.

이왕 글을 쓰는거면, 마크다운을 활용해서 예쁘게 잘 쓰고 싶어서 마크다운 문법을 정리해보았습니다. 설명한다는 느낌보다는 스스로 정리하는 느낌으로 편하게 썼슴당. 참고로 Extended Syntax의 경우 Markdown Application에 따라 지원을 하지 않을 수도 있습니다(velog도 Footnote와 Emoji Shortcode가 되지 않았습니다 ㅠㅠ).


Headings

# heading level 1
## heading level 2
### heading level 3
#### heading level 4
##### heading level 5
####### heading level 6

Line Breaks

첫 번째 문장  
두 번째 문장  <!--two or more spaces (commonly referred to as “trailing whitespace”) for line breaks-->
세 번째 문장<br>
네 번째 문장

첫 번째 문장
두 번째 문장
세 번째 문장
네 번째 문장

Emphasis

*Italic*, _Italic_
**Bold**, __Bold__
***Bold and Italic***, ___Bold and Italic___
<u>Underline</u>
~~Strikethrough~~

Bold, Italic, Bold and Italic, Underline, Strikethrough

Blockquotes

> Dorothy followed her through many of the beautiful rooms in her castle.

Dorothy followed her through many of the beautiful rooms in her castle.

Nested Blockquotes

> Dorothy followed her through many of the beautiful rooms in her castle.
>
>> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

Blockquotes with Other Elements

> #### The quarterly results look great!
>
> - Revenue was off the chart.
> - Profits were higher than ever.
>
>  *Everything* is going according to **plan**.

The quarterly results look great!

  • Revenue was off the chart.

  • Profits were higher than ever.

    Everything is going according to plan.

Lists

Ordered Lists

1. First item
2. Second item
3. Third item
    1. Indented item
    2. Indented item
4. Fourth item
  1. First item
  2. Second item
  3. Third item
    1. Indented item
    2. Indented item
  4. Fourth item

Unordered Lists

- First item
- Second item
- Third item
    - Indented item
    - Indented item
- Fourth item
  • First item
  • Second item
  • Third item
    • Indented item
    • Indented item
  • Fourth item

Definition Lists

First Term
: This is the definition of the first term.

Second Term
: This is one definition of the second term.
: This is another definition of the second term.

First Term
: This is the definition of the first term.

Second Term
: This is one definition of the second term.
: This is another definition of the second term.

Task Lists

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media
  • Write the press release
  • Update the website
  • Contact the media

Code

backtick(`` ` ``)으로 감싸준다. 이는 `<pre>`, `<code>`로 변환된다.

backtick(`)으로 감싸준다. 이는 <pre>, <code>로 변환된다.

Fenced Code Blocks

` 혹은 ~ 를 3번 이상 사용.

```
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}
```
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

Systax Highlighting

Language - Key 참고

```json
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}
```
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

Horizontal Rules

Use three or more asterisks(***), dashes(---), or underscores(___) 
***
---
___________

output:


Links

I love [Velog](https://velog.io/).

[harang][1]

<fake@example.com>

[1]: https://velog.io/@harang "ISA COOL!"

output:
I love Velog.

harang

fake@example.com

Images

![Cool Kids Never Stop](https://velog.velcdn.com/images%2Fharang%2Fpost%2F661d51a1-188e-42c8-bc94-994261426784%2Fcoolkidsneverstop.jpg)

output:

Linking Images

[![Cool Kids Never Stop](https://velog.velcdn.com/images%2Fharang%2Fpost%2F661d51a1-188e-42c8-bc94-994261426784%2Fcoolkidsneverstop.jpg)](https://velog.io/@harang "ISA COOL!")

output:

Tables

참고로 양쪽 가장자리의 pipe(|)는 생략 가능.

| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |

output:

SyntaxDescription
HeaderTitle
ParagraphText

Alignment

| Syntax      | Description | Test Text     |
| :---        |    :----:   |          ---: |
| Header      | Title       | Here's this   |
| Paragraph   | Text        | And more      |

output:

SyntaxDescriptionTest Text
HeaderTitleHere's this
ParagraphTextAnd more

Emoji

Emojipedia 참고. 복붙해서 쓰면 된다!

I love velog ❤️💚❤️

> Thank you for reading 🙏

I love velog ❤️💚❤️

Thank you for reading 🙏

profile
ISA KOOL!

0개의 댓글