Tip Markdown Syntax Guide openserver 2017. 9. 18. 18:55 # Markdown Syntax Guide [XME - Xeno Markdown Editor 초경량 마크다운 편집기 다운로드](http://openserver.tistory.com/284) > Table of Contents >* [Header](#header) >* [Emphasis](#emphasis) >* [Lists](#lists) >* [Links](#links) >* [Images](#images) >* [Code & Syntax Highlighting](#code-&-syntax-highlighting) >* [Tables](#tables) >* [Blockquotes](#blockquotes) >* [ Inline HTML](#inline-html) >* [Horizontal Rule](#horizontal-rule) >* [Line Breaks](#line-breaks) >* [Youtube Video](#youtube-video) --- 본 가이드에서는 범용적으로 사용하는 마크다운(Markdown) 문서의 문법에 대하여 간략히 설명합니다. ## Header ```markdown # H1 ## H2 ### H3 #### H4 ##### H5 ###### H6 H1, H2 태그이 경우에는 밑줄(_, =)로도 표현할 수 있습니다. Alt-H1 ====== Alt-H2 ------ ``` [사용결과] # H1 ## H2 ### H3 #### H4 ##### H5 ###### H6 Alt-H1 ====== Alt-H2 ------ ## Emphasis ```markdown *별표 이탤릭* 또는 _언더바 이탤릭_ **별표 굵게** 또는 __언더바 굵게__ **별표 언더바 굵게 이탤릭 _복합체_** ~~취소줄~~ ``` [사용결과] *별표 이탤릭* 또는 _언더바 이탤릭_ **별표 굵게** 또는 __언더바 굵게__ **별표 언더바 굵게 이탤릭 _복합체_** ~~취소줄~~ ## Lists ##### 문법표시에 1컬럼의 점(.)은 공백을 표시하기위해서 추가한 것이므로 실제사용시에는 스페이스바로 사용 ```markdown 1. 숫자형 리스트 첫번째 아이템 2. 숫자형 두번째 아이템 ....* 순서없는 서브리스트 아이템 1. 앞의 숫자는 의미가 없습니다. 숫자이기만 하면 됩니다. ....1. 순서형 서브리스트 아이템 ....1. 순서형 서브리스트 두번째 아이템 4. 숫자형 리스트 마지막 아이템 ....- 순서없는 서브리스트 아이템 마이너스 기호 ....+ 순서없는 서브리스트 아이템 플러스 기호 스페이스바나 탭키를 이용해서 일정하게 들여쓰기만 지켜주면 됩니다. 순서없는 리스트는 별표(*) 대신에 마이너스(-) 기호나 플러스(+) 기호도 인식합니다. ``` [사용결과] 1. 숫자형 리스트 첫번째 아이템 2. 숫자형 두번째 아이템 * 순서없는 서브리스트 아이템 1. 앞의 숫자는 의미가 없습니다. 숫자이기만 하면 됩니다. 1. 순서형 서브리스트 아이템 1. 순서형 서브리스트 두번째 아이템 4. 숫자형 리스트 마지막 아이템 - 순서없는 서브리스트 아이템 마이너스 기호 + 순서없는 서브리스트 아이템 플러스 기호 ## Links ```markdown 링크를 사용하는 방법은 크게 2가지 입니다. [일반링크표시문자](http://www.xenostream.com) [일반링크와 툴팁텍스트](http://www.xenostream.com "Xenostream 공식 홈페이지") [레퍼런스 타입 링크][Goto Reference Link] [상대주소 레퍼런스 파일타입 링크](../doc/README.md) [숫자지정형 링크타입][1] [자체레퍼런스 링크] URL은 꺽쇠기호를 감싸는 순간 자동적으로 링크를 추가합니다. 다음은 상기에서 사용한 레퍼런스 링크들의 정의 부분입니다 [Goto Reference Link]: http://www.xenostream.com [1]: http://blog.naver.com/xenostream [자체레퍼런스 링크] ``` [사용결과] [일반링크표시문자](http://www.xenostream.com) [일반링크와 툴팁텍스트](http://www.xenostream.com "Xenostream 공식 홈페이지") [레퍼런스 타입 링크][Goto Reference Link] [상대주소 레퍼런스 파일타입 링크](../doc/README.md) [숫자지정형 링크타입][1] [자체레퍼런스 링크] [Goto Reference Link]: http://www.xenostream.com [1]: http://blog.naver.com/xenostream [자체레퍼런스 링크]: http://openserver.tistory.com ## Images ```markdown 보기싫겠지만, 제사진을 가지고 이미지를 표시하겠습니다. (마우스를 가져가면 툴팁이 표시됩니다) ! + [툴팁텍스트] + (이미지 경로) 형식입니다.  다음은 이미지의 줄임표현이므로, 결과는 동일합니다. 주소부분을 별도로 정의한것 뿐입니다. ![내얼굴][face] [face]: https://t1.daumcdn.net/cfile/tistory/99932E3359BE6A9109 ``` [사용결과]  ![Xeno Markdown Editor][xme] [xme]: https://t1.daumcdn.net/cfile/tistory/99932E3359BE6A9109 ## Code & Syntax Highlighting ```markdown 마크다운 문서에서 소스코드 문법강조 기능은 제공되지 않지만, 깃허브와 같은 일부 시스템에서는 문법강조기능을 지원 하기도 합니다. 그래서 지원가능 시스템마다 사용법이 다를수 있습니다. 본 가이드에서는 깃허브에서 사용하는 GFM을 위주로 설명합니다. 일정 구문이나 코드를 강조할려면 키보드상단 숫자 1키의 `(Back tick) 문자로 처리합니다. 한개 혹은 세개의 백틱으로 구문을 감싸면 됩니다. `단순 구문 백틱 한쌍` 소스코드를 표시할때는 3개의 연속 백틱으로 감싸면 되고, 깃허브의 경우 해당 소스의 종류를 기록하면, 해당 언어에 맞도록 구문강조를 처리하게 됩니다. 단순히 4개의 공백으로 시작해도 일반적인 소스코드 인용형태로 나타납니다. (표준방식) 앞부분의 \ 부분은 마크다운문서가 그대로 표시되는 현상으로 이스케이프시킨 것이므로 실제사용할때는 3개의 백틱문자로만 사용하시기 바랍니다. \```javascript var s = "Javascript syntax highlighting"; alert(s); \``` \```python s = "Python syntax highlighting" print s \``` 언어의 종류를 기록하지 않으면 단순히 구문강조 없이 소스코드임을 나타내도록 표시만 합니다. ``` [사용결과] `단순 구문 백틱 한쌍` ```javascript var s = "Javascript syntax highlighting"; alert(s); ``` ```python s = "Python syntax highlighting" print s ``` ``` #include <stdio.h> int main(int argc, char *argv[]) { printf("Hello, World!\n"); return 0; } ``` ## Tables ```markdown 테이블 또한 표준 마크다운에서 지원하는 기능은 아닙니다. 하지만 깃허브와 대부분에서는 지원하고 있습니다. 마크다운 문서에서 HTML 태그를 사용할 수 있으므로 태그로 작업해도 됩니다!!! 셀의 정렬방식을 지정하는 표를 표시하는 대표적인 방법은 다음과 같습니다. | Tables | Are | Cool | | ------------- |:-------------:| -----:| | col 3 is | right-aligned | $1600 | | col 2 is | centered | $12 | | zebra stripes | are neat | $1 | 깃허브의 경우에는 처음과 끝의 파이프기호를 생략해도 표시됩니다.. 셀의 내용 정렬은 보다시피 2번째의 콜론과 대시로 처리합니다. (콜론의 위치로...) 일반 문서와 표를 그리기위함을 분리하는 관건은 2번째 줄의 3개 이상의 대쉬입니다. 각 셀 내부에서도 마크다운 태그를 그대로 사용할 수 있습니다. Markdown | Less | Pretty --- | --- | --- *Still* | `renders` | **nicely** 1 | 2 | 3 ``` [사용결과] | Tables | Are | Cool | | ------------- |:-------------:| -----:| | col 3 is | right-aligned | $1600 | | col 2 is | centered | $12 | | zebra stripes | are neat | $1 | Markdown | Less | Pretty --- | --- | --- *Still* | `renders` | **nicely** 1 | 2 | 3 ## Blockquotes ```markdown 이메일에서 답장을 보낼때 답장부분이 들여쓰기 되면서 인용됨을 표시합니다. 인용구는 한줄로 길게~ 써도 되고 각줄마다 별도로 인용기호를 사용해도 됩니다. > 인용구문 1 > 인용구문 2 > 인용구문 3 >> 이중 인용구문 1 > **굵게** __이탤릭__ 도 가능합니다. ``` [사용결과] > 인용구문 1 > 인용구문 2 > 인용구문 3 >> 이중 인용구문 1 > **굵게** __이탤릭__ 도 가능합니다. ## Inline HTML ```markdown 마크다운 문서에서는 문서 어디서나 HTML 태그를 곧바로 사용할 수 있습니다. 테이블, 이미지, 링크 등 모든 것이 가능합니다. <dl> <dt>Definition list</dt> <dd>Is something people use sometimes.</dd> <dt>Markdown in HTML</dt> <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd> </dl> ``` [사용결과] <dl> <dt>Definition list</dt> <dd>Is something people use sometimes.</dd> <dt>Markdown in HTML</dt> <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd> </dl> ## Horizontal Rule ```markdown 수평줄을 표시하기 위해서는 ( -, *, _) 3가지의 문자를 3개연속으로 써주기만 하면 됩니다. --- *** ___ ``` [사용결과] --- *** ___ ## Line Breaks ```markdown 줄바꿈문자 또한 시스템마다 틀린 경우가 대부분이나, 대체로 2개이상의 스페이스를 추가하거나 엔터키를 2번 입력해서 문단 분리를 처리합니다. ``` ## Youtube Video ```markdown 유투브 동영상의 경우는 HTML 태그로 처리할 수 있습니다. 하지만 마크다운 태그로도 표시할 수 있습니다만, 동영상의 크기와 테두리 가 없이 표시됩니다. <a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE " target="_blank"><img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg" alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a> [](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE) ``` [사용결과] <a href="http://www.youtube.com/watch?feature=player_embedded&v=dP1xVpMPn8M " target="_blank"><img src="http://img.youtube.com/vi/dP1xVpMPn8M/0.jpg" alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a> [](http://www.youtube.com/watch?v=dP1xVpMPn8M) 저작자표시 비영리 변경금지 (새창열림)
