MarkDown Syntax

MarkDown Syntax는 HTML Tag로 변환되어 출력된다.
하지만, 모든 HTML Tag를 대체하지 않는다.

1. Headers

---

• <h> 태그로 변환된다.
• 제목 앞에 #(hash) 를 작성하여 표현하고 1개부터 6개까지 쓸 수 있다.
• 이때, #(hash) 가 늘어날수록 제목의 수준은 내려간다. (텍스트 크기가 작아진다.)

🧑🏻‍💻 [Source code]

# Title1
## Title2
### Title3
#### Title4
##### Title5
###### Title6

Title1
=
Title2
-			<!--다른 문법과 혼동될 수 있으니, 알아만 두자.-->

🔃 [MarkDown to HTML]

<h1>Title1</h1>
<h2>Title2</h2>
<h3>Title3</h3>
<h4>Title4</h4>
<h5>Title5</h5>
<h6>Title6</h6>

<h1>Title1</h1>
<h2>Title2</h2>

💻 [Execution result]

Title1

Title2

Title3

Title4

Title5

Title6

2. Lists

---

• <ol>, <ul>, <li> 태그로 변환된다.

2.1. Ordered Lists

• No.(dot) 를 작성하여 표현하고 __중첩이 가능__하다.
• 이때, 적힌 숫자와는 상관없이 순서대로 번호가 매겨진다.

🧑🏻‍💻 [Source code]

1. List A
	1. List B
    1. List C
1. List D
1. List E

🔃 [MarkDown to HTML]

<ol>
	<li>List A</li>
    <ol>
		<li>List B</li>
		<li>List C</li>
	</ol>
	<li>List D</li>
	<li>List E</li>
</ol>

💻 [Execution result]

1. List A
   1. List B
   2. List C
2. List D
3. List E

2.2. Unordered Lists

• -(hyphen), *(asterisk), +(plus)를 1개만 작성하여 표현한다.

🧑🏻‍💻 [Source code]

- List A
- List B
	- List C	<!--velog의 MarkDown 문법에선 중첩된 표현을 지원하지 않는다.-->
* List D
+ List E

🔃 [MarkDown to HTML]

<ul>
	<li>List A</li>
    <li>List B</li>
		- List C
    <li>List D</li>
    <br>		<!--순서는 없지만, 다른 기호를 번갈아 사용할 때와 줄바꿈이 추가된다.-->
    <li>List E</li>
</ul>

💻 [Execution result]

• List A
• List B
  • List C
• List D
• List E

3. Emphasis

---

🧑🏻‍💻 [Source code]

*Italicse* or _Italicse_	
**Bold** or __Bold__	
~~Strikethrough~~	
<!--밑줄은 MarkDown에서 지원하지 않기에, HTML 태그를 직접 사용해야한다.-->

🔃 [MarkDown to HTML]

<em>Italics</em>
<strong>Bold</strong>
<del>Strikethrough</del>
<u>Underscore</u>

💻 [Execution result]

Italics
Bold
Strikethrough
Underscore

4. BlockQuotes

---

• <blockquote> 태그로 변환된다.
• 인용문 앞에 >(greater than sign) 를 작성하여 표현한다.
• 여러 번 입력 시 __중첩이 가능__하다.

🧑🏻‍💻 [Source code]

> Blockquote
>> Nested Blockquote

🔃 [MarkDown to HTML]

<blockquote>
	Blockquote
	<blockquote>
		Nested Blockquote
	</blockquote>
</blockquote>

💻 [Execution result]

Blockquote

Nested Blockquote

5. Code Blocks

---

• 작성할 코드를 `(backtick) 또는 ~(Tilde) 가 __3개 이상__이고, __시작과 끝이 같은 개수__로 묶어 표현한다.
• 이때, 시작지점 바로 뒤에 작성할 코드가 어떤 프로그래밍 언어인지 기입하면 __Syntax Highlighting이 지원__되어 코드의 가독성을 높일 수 있다.

🖍️ [Syntax Highlighting List]

프로그래밍 언어	기입 방식
Bash	bash
C#	cs
C++	cpp
Diff	diff
HTML, XML	html
Ini	ini
JSON	json
Java	java
JavaScript	javascript
PHP	php
Perl	perl
Python	python
Ruby	ruby
SQL	sql
Dart	dart

🧑🏻‍💻 [Source code]

~~~
print("Welcome to JBK's velog")
~~~

```python
print("Welcome to JBK's velog")
```

🔃 [MarkDown to HTML]

<!--Syntax Highlighting은 불가능하다.-->
<pre><code>print("Welcome to JBK's velog")</code></pre>

💻 [Execution result]

print("Welcome to JBK's velog")

print("Welcome to JBK's velog")

5.1. Inline Code Blocks

• <code> 태그로 변환된다.
• 작성할 코드를 `(backtick) 이 __2개 이하__이고, __시작과 끝이 같은 개수__로 묶어 표현한다.
• 이때, Syntax Highlighting은 지원되지 않는다.

🧑🏻‍💻 [Source code]

`Inline Code`

🔃 [MarkDown to HTML]

<code>Inline Code</code>

💻 [Execution result]

Inline Code

6. Horizontal Rules

---

• <hr> 태그로 변환된다.
• -(hyphen), *(asterisk), _(underbar) 중 하나를 3개 이상 작성하여 표현한다.

🧑🏻‍💻 [Source code]

---		<!--header로 인식할 수 있으니, 이전 라인은 비워둬야한다.-->
***
___

🔃 [MarkDown to HTML]

<hr>
<hr>
<hr>

💻 [Execution result]

---

---

---

7. Tables

---

🧑🏻‍💻 [Source code]

| Header1  | Header2  | Header3  |
| -------- | -------- | -------- |
| Content1 | Content2 | Content3 |

| Header1 | Header2 | Header3 |
| :------ | :-----: | ------: |
| Left    | Center  |   Right |

💻 [Execution result]

Header1	Header2	Header3
Content1	Content2	Content3

Header1	Header2	Header3
Left	Center	Right

8. Links

---

• <a> 태그로 변환된다.
  

8.1. External Links

• [](brackets) 안에는 __이름을 지정__하고 ()(parentheses) 안에는 __링크를 표기__한다.
• 이때, ""(quotation marks) 안에 설명을 작성할 수 있으나, __생략 가능__하다.

🧑🏻‍💻 [Source code]

<!--새 창에서 지정된 링크로 이동하고 싶으면 HTML 태그 사용해야한다.-->
[현재 창에서 JBK's velog로 이동하기](https://velog.io/@jaebinary "JBK님의 velog로 이동합니다.")

🔃 [MarkDown to HTML]

<a href="https://velog.io/@jaebinary" title="JBK님의 velog로 이동합니다.">현재 창에서 JBK's velog로 이동하기</a>					<!--현재 창에서 지정된 링크로 이동-->
<a href="https://velog.io/@jaebinary" title="JBK님의 velog로 이동합니다." target="_blank">새 창에서 JBK's velog로 이동하기</a>		<!--새 창에서 지정된 링크로 이동-->

💻 [Execution result]

현재 창에서 JBK’s velog로 이동하기 새 창에서 JBK’s velog로 이동하기

8.2. Internal(Anchored) Links

• velog에서는 <h1>, <h2>, <h3>까지 자동으로 생성되어 우측 상단에 표시된다.
• [](brackets) 안에는 __이름 지정__하고, ()(parentheses) 안에는 __내부링크를 표기__한다.
• 이때, ()(parentheses) 안에는 모두 소문자__이며, __띄어쓰기는 -(hyphen) 으로 나타내고 __특수문자는 생략__한다.

🧑🏻‍💻 [Source code]

[8. Links](#8-links)
[8.1. External Links](#81-external-links)
[8.2. Internal(Anchored) Links](#82-internalanchored-links)

🔃 [MarkDown to HTML]

<a href="#8-links">8. Links</a>
<a href="#81-external-links">8.1. External Links</a>
<a href="#82-internalanchored-links">8.2. Internal(Anchored) Links</a>

💻 [Execution result]

8. Links
8.1. External Links
8.2. Internal(Anchored) Links

9. Adding Images

---

🧑🏻‍💻 [Source code]

![대체텍스트](이미지주소)
![대체텍스트](이미지주소 "설명")
![대체텍스트][참조]

[참조]: 이미지주소
[참조]: 이미지주소 "설명"

🔃 [MarkDown to HTML]

<img src="이미지주소" alt="대체텍스트" title="설명">

💻 [Execution result]

9.1 Add a link to an image

🧑🏻‍💻 [Source code]

[![설명](이미지주소)](링크)

🔃 [MarkDown to HTML]

<a href="링크" target="_blank">
  <img src="이미지주소" alt="대체텍스트" title="설명">
</a>

💻 [Execution result]

10. Comments

---

🧑🏻‍💻 [Source code]

[//]: # Coment		->		<!--Coment-->

💻 [Execution result]

References

---

ParkYoungWoong. (2017. 01. 01.). 마크다운(MarkDown) 사용법 총정리. HEROPY.DEV

Simhyejin. (2016. 06. 30.). [Markdown] 마크다운 문법. GitHub Pages

Kim Ji-Heon. (2015. 04. 03.). [공통] 마크다운 markdown 작성법. GitHub Gist

박응용. (2008.). 위키독스. WikiDocs