Markdown Syntax 및 사용법
GitHub 작업중 README.md 등 Markdown 파일을 작업 할 때 유용한 정보들을 모아보았다.
Headings
| Markdown | HTML |
|---|---|
| # Heading level 1 | <h1>Heading level 1</h1> |
| ## Heading level 2 | <h2>Heading level 2</h2> |
| ### Heading level 3 | <h3>Heading level 3</h3> |
| #### Heading level 4 | <h4>Heading level 4</h4> |
| ##### Heading level 5 | <h5>Heading level 5</h5> |
| ###### Heading level 6 | <h6>Heading level 6</h6> |
Alternate Syntax
| Markdown | HTML |
|---|---|
| Heading level 1 =========== | <h1>Heading level 1</h1> |
| Heading level 2 ——————- | <h2>Heading level 2</h2> |
Emphasis
Bold
| Markdown | HTML |
|---|---|
| I am smart. | I am smart. |
| I love coding. | I love coding. |
Italic
| Markdown | HTML |
|---|---|
| I am smart. | I am smart. |
| I love coding. | I love coding. |
Strikethrough
| Markdown | HTML |
|---|---|
| I am | I am |
| I love | I love |
Blockquotes
1
> Example of blockquote
Example of blockquote
Multiline
1
2
> Example of blockquote
> Bockquote can be multiline
Example of blockquote
Bockquote can be multiline
Nested
1
2
> Example of
> > nested blockquote
Example of
nested blockquote
Markdowns
1
2
3
4
> * bullet point
> ```
> code example
> ```
- bullet point
Lists
Ordered Lists
| Markdown | HTML |
|---|---|
| 1. First item 2. Second item 3. Third item | <ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol> |
Unordered Lists
| Markdown | HTML |
|---|---|
| - First item + Second item * Third item | <ul> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul> |
-, +, * 모두 사용 가능하다.
Horizontal Rules
1
2
3
***
---
___
Links
1
2
3
4
5
6
7
8
[link keyword][id]
[id]: URL "Optional Title here"
// code
Link: [Google][googlelink]
[googlelink]: https://google.com "Go google"
Link: Google
- 외부링크
1
2
사용문법: [Title](link)
적용예: [Google](https://google.com, "google link")
Link: Google
- 자동연결
1
2
3
4
일반적인 URL 혹은 이메일주소인 경우 적절한 형식으로 링크를 형성한다.
* 외부링크: <https://example.com/>
* 이메일링크: <address@example.com>
- 외부링크: https://example.com/
- 이메일링크: address@example.com
Images
1
2
3
4
5
사이즈 조절 기능은 없기 때문에 <img width="" height=""></img>를 이용한다.
예
1
2
3
4
5
<img src="/path/to/img.jpg" width="450px" height="300px" title="px(픽셀) 크기 설정" alt="RubberDuck"></img><br/>
<img src="/path/to/img.jpg" width="40%" height="30%" title="px(픽셀) 크기 설정" alt="RubberDuck"></img>
<img src="http://cfile6.uf.tistory.com/image/2426E646543C9B4532C7B0" width="450px" height="300px" title="px(픽셀) 크기 설정" alt="RubberDuck"></img><br/>
<img src="http://cfile6.uf.tistory.com/image/2426E646543C9B4532C7B0" width="40%" height="30%" title="%(비율) 크기 설정" alt="RubberDuck"></img>
Escaping Characters
| Character | Name |
|---|---|
| \ | backslash |
| ` | backtick |
| * | asterisk |
| _ | underscore |
| { } | curly braces |
| [ ] | brackets |
| < > | angle brackets |
| ( ) | parentheses |
| # | pound sign |
| + | plus sign |
| - | minus sign (hyphen) |
| . | dot |
| ! | exclamation mark |
| | | pipe |
Creating tooltips
1
2
3
<a href="#" data-toggle="tooltip" data-original-title="Tooltip data goes here!"
>Tooltip information</a
>
References
This post is licensed under CC BY 4.0 by the author.