강인규 블로그

0%

마크다운 문법 설명 및 hexo 문법테스트

작성일 Edited on In Disqus:

마크다운 Markdown

마크다운 (Markdown)은 마크업 언어의 일종으로, 존 그루버(John Gruber)와 아론 스워츠(Aaron Swartz)가 만들었다. 읽기도 쓰기도 쉽다는 장점이 있다. ‘존 그루버’는 마크다운으로 작성한 문서를 HTML로 변환하는 펄 스크립트도 만들었다. 확장자는 .md를 쓴다.

저번 포스트에는 장점과 단점을 이야기 했습니다. 이번에는 장점중에 하나인 배우기 쉽다라는 부분에서 왜 그런지 간단히 적어 보겠습니다.

마크다운 명령어

1. 제목

마크다운변환된 모습
# 제목 1
## 제목 2
### 제목 3
#### 제목 4 ####
##### 제목 5 #####
###### 제목 6 ######

제목1

제목2

제목1

제목4

제목5

제목6

`#`을 앞, 뒤에 모두 붙여도 되고, 앞에만 붙여도 된다.

2. 강조 기울여쓰기 / 굵게쓰기

기울여 쓰기 는 HTML에서 <em> 태그를, 굵게쓰기 는 HTML에서 <strong> 태그를 의미합니다. 따라서 CSS에서 그 태그들이 어떻게 보이도록 설정되었는지에 따라 보이는 모습이 달라질 수 있습니다.

마크다운변환된 모습
*기울여쓰기(italic)* _기울여쓰기(italic)_
**굵게쓰기(bold)** __굵게쓰기(bold)__
~~cancelline~~		_기울여쓰기(italic)_
**굵게쓰기(bold)**
~~cancelline~~
이때 * 과 **_** 사이에는 공백이 있어서는 안 됩니다.

3. 링크 인라인 링크 / 참조 링크 / URL만으로 링크하기

ㄱ. 인라인 링크

마크다운변환된 모습
\[링크](http://example.com "링크제목")[링크](http://example.com "링크제목")
대부분 브라우저에서는 마우스 커서를 링크에 가져가면 링크 제목이 뜹니다.

ㄴ. 참조 링크

마크다운변환된 모습
\[링크1]\[1] 과 \[링크2]\[2].

\[1]: http://example.com/ "링크제목1"
\[2]: http://example.org/ "링크제목2"		[링크1][1] 과 [링크2][2]
참조 부분은 문서의 어떤 부분에 있어도 상관없습니다. 그리고 또 주의해야 할 것 중 하나는, 참조부분에서 **[]과 :는 꼭 붙어있어야 한다는 것** 이다.

ㄷ. URL만으로 링크하기 자동연결

마크다운변환된 모습
http://example.com/
<address@example.com>		http://example.com

4. 이미지 인라인 이미지 / 참조 이미지 / 링크된 이미지

ㄱ. 인라인 이미지

마크다운변환된 모습
!\[대체텍스트](/path/to/img.jpg "이미지제목")![](https://i.imgur.com/C9ZVylf.png)
대체텍스트는 시각장애인용 브라우저를 이용할 때 사용되는 것이지만 hexo-hueman에서는 하단에 표시됩니다.
/path/to/img.jpg 부분에 이미지 주소를 넣어주면 됩니다.

ㄴ. 참조 이미지

마크다운변환된 모습
!\[대체텍스트]\[1]
\[1]: /path/to/img.jpg "이미지제목"		![][3]

ㄷ. 링크된 이미지

마크다운변환된 모습
\[!\[대체텍스트](/img.jpg)](http://example.com/ "링크제목")[![](https://i.imgur.com/tergQ6G.png)](http://example.com/ "링크제목")
원래는 링크가 맞지만 여기 hexo-heuman에서는 light gallery가 되어 있어 이 기능을 볼 수 없습니다.

5. 수평선 Horizontal Rules

마크다운변환된 모습
***
---
___


수평선을 그리고 싶으면 -, *, _ 를 3개 이상 나열하면 됩니다. 이때 “- - -“와 같은 식으로 중간에 공백을 넣어도 상관없습니다.

6. 각주 footnote

마크다운변환된 모습
각주 \[^1] 는 이렇게 만든다.
\[^1]: 각주다.		각주 [^1] 는 이렇게 만든다.
\[^1]: 각주다.
~~각주는 문서의 가장 밑에 원래 읽던 곳으로 돌아갈 수 있는 링크와 함께 추가된다.~~
GitHub에서는 footnote를 지원해주지 않습니다.

7. 줄넘기기

마크다운변환된 모습
각 라인의 끝에
2개 이상의 스페이스를 넣으면
줄 넘기기가 된다.		각 라인의 끝에
2개 이상의 스페이스를 넣으면
줄 넘기기가 된다.
~~HTML에서와 같이 마크다운(Markdown)에서도, 에디터상에서 엔터를 쳐서 줄을 넘겨도 브라우저상에서 표현될 때는 줄이 넘겨지지 않은 상태로 나온다.~~
이 프로그램(hexo)에서는 지원해주지 않습니다.

8. 리스트 순서없는 리스트 / 순서있는 리스트 / 혼합 목록

ㄱ. 순서 없는 리스트 Unordered Lists

마크다운변환된 모습
\* list item 1
    \* list item 1-1
    \* list item 1-2
  • list item 1
    • list item 1-1
    • list item 1-2
\+ list item 1
    \+ list item 1-1
    \+ list item 1-2
  • list item 1
    • list item 1-1
    • list item 1-2
\- list item 1
    \- list item 1-1
    \- list item 1-2
  • list item 1
    • list item 1-1
    • list item 1-2
순서없는 리스트를 작성하기 위해서는 -, *, +을 맨앞에 적으면 됩니다.
원래는 2번째 리스트에 circle이 나와야 하지만 여기서는 disc가 나옵니다.

ㄴ. 순서있는 리스트 Ordered Lists

마크다운변환된 모습
1. list item 1
1. list item 2
2. list item 3
0. list item 4
3. list item 5
  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
순서 있는 리스트를 작성하기 위해서는 숫자 다음 .을 찍습니다. 순서는 적힌 숫자랑 상관없이 순서대로 번호가 매겨집니다.

ㄷ. 혼합 목록

마크다운변환된 모습
1. list item 1
    \* list item 1-1
    \* list item 1-2
0. list item 4
3. list item 5
  • list item 1
    • list item 1-1
    • list item 1-2
  • list item 4
  • list item 5

9. 인용 Blockquotes

마크다운변환된 모습
\>인용문
\>\>인용문
인용문
인용문
인용문의 모양은 css에 어떻게 모양이 정의되었는지에 따라 달라진다. 따라서 테마를 바꾸면 인용문의 모양도 달라질 수 있습니다.

10. 서식 설정 텍스트

마크다운변환된 모습
각각의 줄을 2개 이상의
스페이스로 시작하면
글을 타이핑하는 그대로 정확히
보여지게 할 수 있다.
[test](http://test.com)		각각의 줄을 2개 이상의
스페이스로 시작하면
글을 타이팅하는 그대로 정확히
보여지게 할 수 있다.
[test](http://test.com)
서식 설정 텍스트 태그는 마크다운이나 HTML 태그 등을 그대로 보여주고자 할 때 사용하면 됩니다.

11. 코드 code

마크다운변환된 모습
'코드 [test](http://test.com)'코드 [test](http://test.com)
코드 안에는 링크가 되지 않습니다.

12. 코드 블록 code block

마크다운변환된 모습
~~~
코드가 들어갈 부분
~~~
```
코드가 들어갈 부분
```
1
코드가 들어갈 부분
1
코드가 들어갈 부분

13. 문법 강조 hexo에서는 이렇게 됩니다.

마크다운변환된 모습
```{지원언어} [타이틀]
코드가 들어갈 부분
```
```css css
# test {}
```
css
1
#test {}
{지원언어}는 여러가지 언어를 사용 가능합니다.

14. 정의 목록 Definition Lists

마크다운변환된 모습
Hexo
: 정적 웹사이트 제작 도구		Hexo
   : 정적 웹사이트 제작 도구
실험 결과 hexo에서는 안 되고 있습니다.

15. 약어

마크다운변환된 모습
마크다운(Markdown)은 일반 텍스트를 HTML로 변환한다.
*[HTML]: HyperText Markup Language		마크다운(Markdown)은 일반 텍스트를 HTML로 변환한다.
실험 결과 hexo에서는 안 되고 있습니다.

정리

마크다운을 사용하면서 한번은 정리해야지 생각하다가 이렇게 정리했습니다. 막상 하다 보니 되는것과 안돼는 것이 더러 있네요. 플러그인을 사용해야 하는 부분도 있어서 시간 나면 이것도 정리해 볼까 합니다. 우선은 여기 가지 정리해 봅니다.