마크다운

마크다운 홈페이지

Daring Fireball: Markdown

 

마크다운: 텍스트를 html로 변환하는 도구로, 읽기 쉽고 쓰기 쉬운 일반 텍스트 형식을 사용하여 작성한 후 xtml 또는 html로 변환이 가능하다.

1. 일반 텍스트 형식 구문
2. 일반 텍스ㅡ 형식을 html로 변환하는 perl로 작성된 도구

설계 목표: 가능한 읽기 쉽게 만드는 것으로, 일반 텍스트로 게시할 수 있어야 한다는 아이디어로 출발, 영감의 원천은 일반 텍스트 이메일 형식

 

Header

H1 header는 ====를 밑에 두어 할 수 있고

H2 header는 ------를 밑에 두어 할 수 있다.

H1 ~ H6까지는 #의 갯수만큼 앞에 붙여 표시할 수 있다.

 

Markdown Source	HTML Source	HTML Preview
h1 Header ========	<h1>h1 Header</h1>	h1 Header
#h1 Header	<h1>h1 Header</h1>	h1 Header
h2 Header -------------	<h2>h2 Header</h2>	h2 Header
##h2 Header	<h2>h2 Header</h2>	h2 Header
###h3 Header	<h3>h3 Header</h3>	h3 Header

 

 

인용구

>로 표현할 수 있다.

Markdown Source	HTML Source	HTML Preview
>Blockquotes >> Nested blockquotes	<blockquote>   <p>Blockquotes </p>   <blockquote>   <p>Nested blockquotes </p> </blockquote> </blockquote>	Blockquotes             Nested blockquotes

 

강조

*, _ 로 표시한다. */_는 이텔릭체이고, **/__는 두껍게 표현한다.

두 개를 동시에 사용할 수 있다.

Markdown Source	HTML Source	HTML Preview
*이텔릭체*	<p><em>이텔릭체</em></p>
**두껍게**	<p><strong>두껍게</strong></p>	두껍게
_이텔릭체 **두껍게**_	<p><em>이텔릭체 <strong>두껍게</strong></em></p>

 

 

목록

순서가 없는 목록은 *, +, - 로 표현할 수 있다.

순서가 있는 목록은 1. 2. 3. 로 표현할 수 있다.

Markdown Source	HTML Source	HTML Preview
+ 수박 - 복숭아 * 포도	<ul> <li>수박</li> <li>복숭아</li> <li>포도</li> </ul>	수박 복숭아 포도
+ 수박   - 복숭아      * 포도          - 참외	<ul> <li>수박 <ul><li>복숭아 <ul><li>포도 <ul><li>참외</li></ul></li></ul></li></ul></li> </ul>
1. first 2. second 3. third	<ol> <li>first</li> <li>second</li> <li>third</li> </ol>	first second third

 

링크

inline 방식과 참조 방식을 지원해 준다.

inline 방식은 [링크] 로 표현할 수 있고, [링크, "속성"] 으로 속성을 추가할 수 있다.

 

참조 방식은 다른 위치에서 정의한 이름으로 링크를 참조할 수 있다.

[첫번째][1] [두번째][2]

[1]: 링크 "속성"

[2]: 링크 "속성"

 

 

Markdown Source	HTML Source	HTML Preview
[네이버링크](https://naver.com/ "네이버")	<p><a href="https://naver.com/" title="네이버">네이버링크</a></p>	네이버링크
[구글][1] [네이버][2] [1]: https://google.com/ "구글" [2]: https://naver.com/ "네이버"	<p><a href="https://google.com/" title="구글">구글</a> <a href="https://naver.com/" title="네이버">네이버</a></p>	구글 네이버

 

이미지

링크와 매우 유사하다.

Markdown Source	HTML Source	HTML Preview
	<p><img src="/path/to/img.jpg" alt="alt text" title="Title" /></p>
![alt text][id] [id]: /path/to/img.jpg "Title"	<p><img src="/path/to/img.jpg" alt="alt text" title="Title" /></p>

 

 

코드

`와 함께 &또는 <>를 사용하면 자동으로 HTML 엔티티로 변환된다. HTML 예제 코드에 대해 작성 할 수 있다.

Markdown Source	HTML Source	HTML Preview
'&mdash;' 작성	<p>'&mdash;' 작성</p>	'—' 작성
`<blink>` 작성	<p><code>&lt;blink&gt;</code> 작성</p>	<blink> 작성

 

인라인 html

html 요소 안에서는 markdown이 안된다

Markdown Source	HTML Source	HTML Preview
This is a regular paragraph. <table>     <tr>         <td>*Foo*</td>     </tr> </table> This is another regular paragraph.	<p>This is a regular paragraph.</p> <table>     <tr>         <td>*Foo*</td>     </tr> </table> <p>This is another regular paragraph.</p>	This is a regular paragraph. *Foo* This is another regular paragraph.

 

 

특수문자 자동 이스케이프

html은 <와 &는 태그를 시작하는데 사용되어 리터럴 문자로 사용하려면 &lt; &amp; 같은 엔터티를 사용해야 한다. 

markdown 에서는 html과 같이 이스케이프를 사용하지 않아도 된다.

Markdown Source	HTML Source	HTML Preview
&copy;	<p>&copy;</p>	©
AT&T	<p>AT&amp;T</p>	AT&T
4 < 5	<p>4 &lt; 5</p>	4 < 5

 

 

블록 요소

단락 및 줄 바꿈

<br/> 태그를 삽입 하려면 두줄 이상의 공백을 주고 줄바꿈을 한다.

Markdown Source	HTML Source	HTML Preview
단락줄   바꿈	<p>단락줄 <br /> 바꿈 </p>	단락줄 바꿈

 

 

코드 블록

블록의 줄을 줄바꿈 후 최소 4개의 공백 또는 1개의 탭으로 들여쓰기 하면 된다. 코드블록 내에서 &, <,>는 자동으로 특수문자 자동 이스케이프를 해준다.

Markdown Source	HTML Source	HTML Preview
일반문단     코드문단	<p>일반문단</p> <pre><code>코드문단 </code></pre>
<div class="footer">      &copy; 2004 Foo Corporation </div>	<div class="footer">      &copy; 2004 Foo Corporation </div>	©
<div class="footer">      AT&T </div>	<div class="footer">      AT&T </div>	AT&T

 

수평선

세개 이상의 하이픈, 별표, 밑줄은 수평선을 만들어준다.

Markdown Source	HTML Source	HTML Preview
* * *	<hr />
***	<hr/>
- - -	<hr/>
---------	<hr/>