[Github 블로그] Markdown 문법 총정리
🍀 jekyll 블로그 포스팅을 위한 Markdown 문법 정리
제목(Header)
글의 제목을 작성할 때 사용하며, 각 제목마다 permalink가 있다.
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> 태그로 변환되고, ‘#’의 갯수에 따라 제목 크기가 나뉜다.
1
2
3
4
5
6
# h1
## h2
### h3
#### h4
##### h5
###### h6
h1
h2
h3
h4
h5
h6
<h1>, <h2>는 다음과 같이 표현할 수 있다.
1
2
3
4
5
h1
=====
h2
-----
강조(Emphasis)
텍스트에 <em>(기울임), <del>(취소선), <strong>(두꺼움), <u></u>(밑줄) 등을 표현할 수 있다.
두꺼움
1
**굵게 쓰기**
굵게 쓰기
기울임
1
2
*기울여 쓰기*
***굵고 기울여 쓰기***
기울여 쓰기 굵고 기울여 쓰기
취소선
1
~~텍스트 취소하기~~
텍스트 취소하기
밑줄
1
<u>텍스트에 밑줄</u>
텍스트에 밑줄
줄바꿈
줄바꿈(Line Breaks)은 문장 마지막에 띄어쓰기 2번 이상,
또는 문장 마지막에 <br>을 입력하면 된다.
1
2
안녕하세요. <!--띄어쓰기 2칸-->
좋은 날이에요.
안녕하세요.
좋은 날이에요.
1
안녕하세요.<br>좋은 날이에요.
안녕하세요.
좋은 날이에요.
인용문(BlockQuote)
인용문은 <blockquote>로 변환되어 나타난다.
1
2
3
4
5
6
> 인용문
> _(출처)_
>또한 인용문은
>>중첩도
>>>가능합니다!
인용문 (출처)
또한 인용문은
중첩도
가능합니다!
목록(List)
목록은 <ol>, <ul>, <li>태그로 변환된다. 1.로 시작되는 ordered list는 <ol>, -로 시작하는 unordered list는 <ul>로 변환된다.
들여쓰기를 통해 하위 목록을 작성한다.
하위 목록 작성 시, 들여쓰기가 2칸이 아닌 3칸 이상일 수 있다.
순서가 있거나 없는 목록을 혼합할 수 있지만 동작하지 않을 수 있다.
ordered list
1
2
3
4
5
6
7
8
1. ordered
2. list
1. ordered
- ordered
- list
2. list
- ordered
3. fin
출력 결과:
- ordered
- list
- ordered
- ordered
- list
- list
- ordered
- ordered
- fin
unordered list
1
2
3
4
- unordered
- list
* unordered
+ list
출력 결과:
- unordered
- list
- unordered
- list
- unordered
check list
1
2
- [ ] 체크 X
- [x] 체크 O
- 체크 X
- 체크 O
링크
링크(Links)는 <a>로 표현된다.
구조:
1
2
3
4
5
6
[name](link)
[name](link "brief")
[name][ref]
[ref]: link
[ref]: link "brief"
예시:
1
2
3
4
5
6
7
8
9
10
11
12
[Google](https://google.com)
[Google](https://google.com "설명 작성")
[GitHub][Git]
문서 안에서 [Git]처럼 참조 링크를 사용할 수 있다.
또한 `< >`안의 url은 자동으로 링크로 된다.
구글: <https://google.com>
[Git]: https://github.com
문서 안에서 Git처럼 참조 링크를 사용할 수 있다. 또한 < >안의 url은 자동으로 링크로 된다.
이미지
이미지는 <img>로 변환되며 링크와 비슷하지만 앞에 !를 추가해야 한다.
1
2
로컬 파일도 가능!
코드 강조
코드(Code)는 <pre>, <code>로 변환된다. `(백틱) 기호를 사용한다.
인라인(Inline)
강조할 코드를 백틱으로 감싸면 된다.
1
이게 `인라인(lnlince)`입니다.
출력 결과:
이게 인라인(lnlince)입니다.
블록(Block)
코드 블록(Block)은 `을 3번 이상 입력하고 코드 이름을 명시하여 표현한다. 코드 블록에서 시작과 종료 `의 개수는 같아야 한다.
1
2
3
```언어이름(소문자)
내용
```
언어 이름을 적으면 변수 등에 색깔 하이라이트가 적용된다.
예시:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
```html
<a href="https://www.github.co.kr/" target="_blank">GitHub</a>
```
```javascript
function plus(a, b = 1) {
console.log(a, b)
return a + b
}
```
```python
h = "Hello World!"
print h
```
```plaintext(생략가능)
그냥 텍스트는 색상 X.
```
출력 결과:
1
<a href="https://www.github.co.kr/" target="_blank">GitHub</a>
1
2
3
4
function plus(a, b = 1) {
console.log(a, b)
return a + b
}
1
2
h = "Hello World!"
print h
1
그냥 텍스트는 색상 X.
표(Table)
표(Table)은 <table>태그로 변환되어 나타난다.
테이블 헤더는 3개 이상의 -(dash)로 구분하고, 셀은 |(vertical bar)로 구분한다. :(Colons)로 셀의 내용을 정렬할 수 있다.
---,:---: 좌측 정렬:---:: 가운데 정렬---:: 우측 정렬
1
2
3
4
5
| name | shape | func |
| ---------- | :---: | -----------: |
| `header` | `---` | `div header` |
| `vertical` | `\|` | `div cell` |
| `colons` | `:` | `array cell` |
플렛폼에 따라 양 끝에
|를 포함해도 되고 안해도 된다.
출력 결과:
| name | shape | func |
|---|---|---|
header | --- | div header |
vertical | \| | div cell |
colons | : | array cell |
주석(Comment)
<!-- -->, [//]: #기호를 통해 주석(Comment)를 표현한다.
1
2
3
4
-- 마지막 --
<!-- 읽어주셔서 -->
[//]: # 감사합니다.
-- 목차 --
– 마지막 –
– 목차 –