티스토리 이야기
티스토리 글쓰기 가이드 : 마크다운 문법 본문
마크다운은 2004년 존 그루버가 만든 text to HTML 컨버팅 도구입니다. 마크다운을 사용하면 많은 기능을 가지고 있는 에디터가 없어도, 복잡한 HTML 코드 작성없이도 형식을 갖춘 문서를 쉽게 작성할 수 있습니다. 물론 티스토리의 새로운 에디터는 강력한 기능을 가지고 있어 이런 도구가 필요없을지도 모릅니다. 하지만 마크다운은 단순 텍스트라 이력 관리가 쉽고 복사 붙여넣기에도 강점이 있어 티스토리에서는 마크다운 모드를 제공하기로 했습니다.
이제 마크다운으로 어떻게 글을 작성할 수 있을지 알아보도록 하겠습니다.
마크다운 기본 문법
글의 기본인 문단(<p>
)은 아무런 기호를 사용하지 않고 작성하면 됩니다. 기본문법은 줄바꿈(<br>
)을 사용하기 위해선 특별한 방법을 사용해야 하지만 후에 설명할 Github flavor 문법으로 인해 별다른 방법없이 줄바꿈을 사용할 수 있게 되었습니다.
문단을 나누기 위해서는 두번 줄바꿈을 해주면 됩니다. 이 방법은 작성할 때도 문단이 나뉜 것처럼 보이고 실제로도 문단이 나뉘기 때문에 아주 유용합니다. 문제는 문단 앞뒤 간격이 없도록 설정한 경우 마크다운에서 보는 문단의 모양과 미리보기로 보는 문단의 모양이 다르게 보인다는 것입니다. 따라서 마크다운 모드로 글을 쓰시는 경우 설정에서 문단 앞뒤 간격을 사용하실 것을 권장합니다.
제목(<h1>~<h6>
)은 문단 앞에 단계에 해당하는 수의 #
을 넣는 것으로 사용할 수 있습니다.
# h1 로 전환
## h2 로 전환
인용(<blockquote>
) 은 문단 앞에 >
을 넣는 것으로 사용할 수 있습니다. 인용 안에서 줄바꿈이나 문단구분을 사용하려면 새로운 줄 앞에 또 >
를 넣어주어야 합니다.
> 인용문입니다.
>
> 인용문 안에서도 새로운 문단을 사용할 수 있고
>
> ## 제목도 사용할 수 있습니다.
리스트는 크게 순서없는 리스트(<ul>
), 순서있는 리스트(<ol>
) 2가지가 있습니다. 순서 없는 리스트는 -
, *
, +
을 문단 앞에 사용하고 순서 있는 리스트는 1.
등으로 직접 숫자를 사용합니다.
* 섞어 써도 되는
+ 순서가 필요없는
- 리스트
1. 첫번째
2. 두번째
3. 세번째를 구분하는 리스트
마크다운에는 폰트를 변경하거나 글자크기를 변경하는 표현식은 없습니다. 강조, 밑줄, 취소 등의 표현만 가능합니다.
**강조** 와 또 다른 _강조_, ~~취소~~
<strong>강조</strong>와 또 다른 <em>강조</em>, <del>취소</del>
링크(<a>
) 문서와 문서를 연결하는 HTML에서 가장 중요한 기능 중 하나입니다. 표시할 텍스트와 연결할 URL을 마크다운에서는 다음과 같이 표시합니다.
[티스토리 개발 이야기](https://tistory.io)
<a href="https://tistory.io">티스토리 개발 이야기</a>
테이블(<table>
)은 블로그에 작성하는 글에는 그리 유용하진 않지만 일부 사용해야하는 경우가 있습니다. 테이블은 다음과 같이 사용합니다.
| 제목 | 내용 |
| ---- | ---- |
| 첫번째 | 내용입니다. |
| 두번째 | 내용입니다. |
<table>
<thead>
<tr>
<th>제목</th>
<th>내용</th>
</tr>
</thead>
<tbody>
<tr>
<td>첫번째</td>
<td>내용입니다.</td>
</tr>
<tr>
<td>두번째</td>
<td>내용입니다.</td>
</tr>
</tbody>
</table>
마지막으로 개발자들이 마크다운을 사랑하는 이유. 코드, 코드 블럭입니다. 이 문서에서도 아주 유용하게 사용 중인데요. `
로 감싸면 inline 코드, ```
로 감싸면 코드블럭이 됩니다.
```kotlin
fun main(args: Array<String>) {
println("Hello, world!")
}
```
<pre><code class="language-kotlin">
fun main(args: Array<String>) {
println("Hello, world!")
}
</code></pre>
Github Flavor 문법
2004년 존 그루버가 말한 마크다운은 지금과 같이 다양한 기능을 제공하지는 않았습니다. 테이블도 없었고 코드블럭도 들여쓰기를 사용해야만 했습니다. 이로 인해 다양한 확장이 나타났는데요. 티스토리는 가장 활발히 사용되고 있는 Github Flavor Markdown (GFM)을 사용하기로 했습니다. 100% 지원하는 것은 아닙니다. Github에서만 사용되는 것도 있으니까요. 하지만 대부분 지원하려고 노력하고 있으니 자세한 내용은 GFM 문서를 통해 확인해주세요.
감사합니다.
- 이전 댓글 더보기
-
eungding 2019.04.03 15:06 신고 마크다운 지원 너무 감사합니다 :) 하지만 코드블럭 색깔이 수정중에는 나오는데 글등록하면 전부 회색이네요ㅠㅠㅠ 개선부탁드립니다...!!!
-
깡냉스 2019.04.12 13:28 신고 너무 감사합니다.. ㅜ_ㅜ
-
livv-jh 2019.04.14 02:19 신고 # ## ### h1, h2, h3 적용이 안되네요 h1~4은 동일한 크기로 적용됩니다. 사용 하시는분들 참고하시길 바랍니다.
-
Ch. 2019.04.14 13:36 신고 마크다운 코드블럭에 설정했던 language 부분이 저장 -> 수정 -> 마크다운 모드로 전환 했을 때 다 날아간 상태로 나옵니다. 이거 좀 수정해주세요...
항상 감사합니다. -
반원_SemiCircle 2019.04.15 02:17 신고 # ## ### 크기 동일합니다. 변경해주세요
-
cs09g 2019.04.16 22:28 신고 마크다운 가이드라면 가이드 문서 자체만큼은 최소 마크다운으로 작성하셔야하는거 아닌가요? 마크다운으로 샘플 조금만 작성해보시면 문제점이 바로 보이실텐데. 아쉽네요.
-
콜홍 2019.05.05 15:22 음... 저는 # 잘 되네요.
##, ###, #### 세가지만 CSS로 지정해놨는데, 이 세가지는 잘 나옵니다
오히려 기본모드에서 코드블럭 넣기가 힘들어서 마크다운 써보려고 합니다!
<pre>와 <code> 를 다른 용도로 사용하는데 코드블럭 플러그인(?)을 쓰면 <pre>와 <code> 둘다 사용하더라구요...
근데 마크다운에서는 따로 사용하는게 가능하네요. -
Joo 2019.05.06 10:05 신고 마크다운은 코드블럭을 <pre><code class='language-xxx'> 로 만듭니다. <pre><code> 는 코드블럭, <code>는 인라인 코드로 사용하시는 것이 편합니다.
대부분의 코드블럭 관련모듈에서 이걸 기본으로 제공합니다. -
Antop 2019.05.13 00:47 신고 마크다운 안되서 티스토리 사용 안하고 있었는데 다시 달려야겠네요 ㅎㅎ
-
RioRex 2019.05.28 17:37 신고 ###굿
-
javaboja 2019.06.17 00:55 신고 마크다운 모드에서 코드 블럭 작성후 기본 모드로 변경 후 코드 블럭 하부에 내용을 입력하려고 하면 입력이 제대로 안되는 버그가 있네요..
확인 부탁드려요 -
moonsang 2019.06.22 10:38 신고 글쓰기 기본설정을 마크다운으로 설정하는 방법이 있나요 ?
-
bossm0n5t3r 2019.07.16 20:59 신고 이거 #, ##, ### 적용이 안되는데 해결방법 있나요?
-
반원_SemiCircle 2019.08.12 03:23 신고 맥의 '''는 코드블럭되는데 윈도우로 '''작성시 코드블럭 생성이 안됩니다. 태그로 하는 방법밖엔 없나요.
-
Joo 2020.02.20 13:18 신고 ''' 가 어떻게 코드블럭이 된건지 모르겠습니다. ```를 사용하셔야 합니다.
들여쓰기를 해도 코드블럭이 되는데 그게 아닌가 싶네요. -
memory_captain 2020.02.17 16:56 신고 마크다운 입혀봤는데 너무 밋밋해서 기존의 사용하던 방식대로 돌렸어요. 이부분 좀더 보완해주셨으면 합니다.
-
Joo 2020.02.20 13:21 신고 밋밋하다는게 어떤 건지 모르겠네요. 에디터에서의 문제인지, 글보기에서 문제인지. 구체적으로 어떤 문제가 있는지 이런걸 말씀하셔야 개선을 해도 할 수 있을 것 같습니다.
-
ㅇㅇ 2020.02.19 23:46 두번 개행하면 빈줄이 적용되어야 하는데 안됩니다.
-
Joo 2020.02.20 13:17 신고 마크다운에서 두번 개행하면 문단나눔입니다. 빈줄이 나오는게 아니구요. 문단 간격이 0으로 설정되어 있는것 아닌지 확인해보세요.
-
알 수 없는 사용자 2020.02.25 09:39 마크다운 모드에서도 클립보드에 있는 이미지 첨부가 되었으면 좋겠어요
-
Wooum@n 2020.02.27 10:01 신고 마크다운 모드 적용 안됩니다.
글 수정모드에서는 마크다운 적용되있는데
그냥 읽으면 적용안되서 나오네요.
소스코드도 마찬가지입니다.
티스토리 버그 왜이렇게 많은건지.. -
Joo 2020.03.01 14:47 신고 마크다운은 글의 형식이지 디자인이 아닙니다. 디자인은 스킨에서 설정하셔야 해요. 예전 스킨은 이런 부분을 고려하지 않고 만들어졌기 때문에 디자인을 약간 수정할 필요가 있습니다. 아니면 최신 스킨을 사용하거나...
-
아키텍토필 2020.03.06 17:33 신고 제가 여러가지 디자인 스킨들을 테스트해봤는데 'Tirium' 같은 몇몇 디자인 스킨을 제외하고 코드 블록 디자인에 버그가 있었습니다.
코드 블록에서 '가장 첫 번째 줄 문장 앞에 띄어쓰기(스페이스)가 들어가는 버그'가 있습니다.
그리고 위에 분들이 편집할 때랑 실제 포스트했을 때랑 마크다운 적용된 디자인이 다르게 보여서 다들 불평을 하시는 것 같은데, 편집할 때 '기본모드'에서 보이는 마크다운 디자인을 적용할 수 있는 스킨이 있습니까?
그 '기본모드'에서 보이는 마크다운 디자인이 참 이쁜 것 같습니다. 사람들이 그 디자인 스킨을 적용하고 싶어서 얘기하는 것 같습니다.
마크다운 지원기능을 넣어주셔서 감사하고 디자인을 좀 더 예쁘게 꾸밀 수 있는 방법을 알려주시면 감사하겠습니다^^
개발자님 고생이 많으십니다. 수고하세요ㅎㅎ -
rue_ 2020.06.25 11:15 신고 글 내용 중 다음과 같은 글이 있는데 전혀 이해가 안됩니다.
마지막으로 개발자들이 마크다운을 사랑하는 이유. 코드, 코드 블럭입니다. 이 문서에서도 아주 유용하게 사용 중인데요. `로 감싸면 inline 코드, ```로 감싸면 코드블럭이 됩니다.
' 사용을 해 봐도 반응 없고 ''' 이것 역시 반응이 없습니다.
진짜 사랑 하고 있나요?
-
ReadingFlynn 2020.07.23 22:16 신고 저도 아주 초짜이지만 도움이 되기를 바라며 댓글을 남깁니다. 마크다운 모드에서 ```(엔터로 줄바꿈)내용(엔터)```로 작성 후 글 포스팅해보세요!
-
ㅇㅇ 2020.12.26 20:17 키보드에서 esc 아래에 있는게 ` 이고, 엔터 왼쪽에 있는게 ' 입니다. esc 아래에 있는 ` 로 써주셔야 합니다.
-
shadowrobot 2021.03.08 17:38 마크 다운 모드에서 줄바꿈 태그 (<br/> )를 하면 미리보기에서 줄바꿈 됨
하지만 저장하고 다시 수정으로 들어가서 내용 조금 바꾸면 없어짐...
줄바꿈은 사랑 입니다.... ㅠㅠ
일단 잘 안보이는 .(점) 넣기로 회피 ㅋ