최종 업데이트 : 2017년 2월 1일 오전 9시 28분

Mytory Markdown 플러그인은 현재 사용 중이지 않습니다. 젯팩 플러그인을 통해 마크다운을 이용하고 있습니다.

원문

Visual Studio Code로 마크다운 문서를 작성하고 GitHub와 Mytory Markdown 플러그인을 이용해 워드프레스로 글을 동기화하고 있습니다(참고). 실제로 사용해보니 VS Code에서 지원하는 마크다운 문법과 Mytory Markdown 플러그인에서 실제 변환되는 문법이 조금 달라서 다른 방법을 이용해볼까 고민해봤지만, 그래도 현재 방법을 고수하기로 했습니다.

Visual Studio Code 공식 홈페이지에서 마크다운 파일을 HTML 파일로 자동으로 변환하는 방법을 안내해주고 있습니다. 그 방법과 마크다운을 HTML로 복사해주는 확장 프로그램이 있었는데 둘 다 제 사용성에는 적합하지 않았습니다.

아래 내용은 저의 특수한 이용 환경에 맞게 내용을 작성한 것이므로 오리지널 문법과 일부 설명이 다를 수 있습니다. 아래 글의 원문을 저의 환경에 맞게 번역/각색했습니다.

제목 스타일

#을 하나씩 늘려갈 때마다 단계적으로 h1부터 h6까지 제목 스타일 적용
문서 가장 첫 줄을 # 제목 형태로 시작하면 Mytory 플러그인에서 이 부분을 자동으로 포스트 타이틀로 변환합니다.

# h1 제목
## h2 제목
### h3 제목
#### h4 제목
##### h5 제목
###### h6 제목

변환 후 :

h1 제목

h2 제목

h3 제목

h4 제목

h5 제목

h6 제목

줄바꿈

같은 문단 안에서 줄 바꿈 : 엔터 한 번 + 이전 문장의 끝에 스페이스 두 번
다른 문단으로 변경 : 엔터 두 번
그 이상 줄을 더 추가하고 싶은 경우 Mytory 플러그인에서는 특이하게 HTML 문법에 맞지 않게 <br></br> 식으로 태그를 입력해야만 하네요.

코드

인라인 코드

코드의 앞 뒤에 ` 기호를 입력합니다(1번 키 좌측의 키입니다).

In this example, `<section></section>` should be wrapped as **code**.

변환 후 :

In this example, <section></section> should be wrapped with code.

코드 블럭

코드 위아래에 ~~~를 입력합니다.
`를 세 개 입력하는 것은 정상 동작을 안 하네요.
코드 블럭의 설명을 돕기 위해 pre 태그를 이용했습니다.

~~~markup
코드코드코드
~~~

변환 후 :

코드코드코드

문법 강조

코드 블럭 옆에 해당 언어의 종류를 입력하면 언어 종류에 맞게 문법을 강조해 줍니다.
이를 위해 플러그인 설치가 필요한 것 같습니다.

~~~js
grunt.initConfig({
  assemble: {
    options: {
      assets: 'docs/assets',
      data: 'src/data/*.{json,yml}',
      helpers: 'src/custom-helpers.js',
      partials: ['src/partials/**/*.{hbs,md}']
    },
    pages: {
      options: {
        layout: 'default.hbs'
      },
      files: {
        './': ['src/templates/pages/index.hbs']
      }
    }
  }
};
~~~

변환 후 :

grunt.initConfig({
  assemble: {
    options: {
      assets: 'docs/assets',
      data: 'src/data/*.{json,yml}',
      helpers: 'src/custom-helpers.js',
      partials: ['src/partials/**/*.{hbs,md}']
    },
    pages: {
      options: {
        layout: 'default.hbs'
      },
      files: {
        './': ['src/templates/pages/index.hbs']
      }
    }
  }
};

코멘트

코멘트는 사용자에게는 보이지 않습니다.

<!--
코멘트입니다.
-->

변환 후 :

구분 선

아래 중의 아무 것이나 구분선을 만들 수 있습니다.

___ : 연속 세 개의 언더 라인
--- : 연속 세 개의 대시
*** : 연속 세 개의 별표

변환 후 :

인라인 HTML

마크다운 문서 중에 HTML 태그를 그대로 사용할 수 있습니다.

예) div 태그 사용

<div class="class">
</div>

텍스트 스타일

굵게

**굵게**

변환 후 :

굵게

기울임꼴

*기울임꼴*

변환 후 :

기울임꼴

취소선

취소선 문법(~~취소선~~)을 지원하지 않아서 HTML 태그를 이용해야 하네요.

<s>취소선</s>

변환 후 :

~~취소선~~

언더라인(밑줄)

공식적인 방법은 작동하지 않아서 ‘u’ 태그를 이용합니다.

<u>언더라인</u>

변환 후 :

언더라인

인용

인용하고 싶은 텍스트 앞을 >로 시작합니다.
인용문 안에 인용문을 넣을 수도 있습니다.

> 인용문입니다.

변환 후 :

인용문입니다.

> 첫 번째 인용문입니다.
>> 두 번째 인용문입니다.

변환 후 :

첫 번째 인용문입니다.
> 두 번째 인용문입니다.

리스트

순서 없는 리스트

아래 중의 하나로 순서 없는 리스트를 시작할 수 있습니다.

* 별표
- 대시
+ 플러스

예시

+ 하나요
+ 둘이요
+ 셋이요
+ 넷이요
+ 다섯이요
  - 다섯의 첫째요
  - 다섯의 둘째요
  - 다섯의 셋째요
  - 다섯의 넷째요
+ 여섯이요
+ 일곱이요
+ 여덟이요

변환 후 :

하나요
둘이요
셋이요
넷이요
다섯이요
- 다섯의 첫째요
- 다섯의 둘째요
- 다섯의 셋째요
- 다섯의 넷째요
여섯이요
일곱이요
여덟이요

순서 있는 리스트

숫자는 1만 계속 입력해도 순차적으로 숫자가 자동으로 증가합니다.
탭이나 스페이스를 통해 목차의 하위 항목을 만들 수 있습니다.

1. 하나요
2. 둘이요
3. 셋이요
4. 넷이요
5. 다섯이요
6. 여섯이요
7. 일곱이요
8. 여덟이요

변환 후 :

하나요
둘이요
셋이요
넷이요
다섯이요
여섯이요
일곱이요
여덟이요

표

| Option | Description |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

변환 후 :

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

텍스트 오른쪽 정렬

대시 오른쪽에 콜론을 추가하면 오른쪽으로 정렬됩니다.

| Option | Description |
| ------:| -----------:|
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

변환 후 :

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

링크

기본 링크

[Bimmermac](https://bimmermac.com)

변환 후 :

Bimmermac

툴팁을 추가할 수 있습니다.

[Bimmermac](https://bimmermac.com "Bimmermac!")

변환 후 :

Bimmermac

참조 링크

본문에는 링크를 바로 적지 않고 [id]로 된 부분을 글의 아무 곳에나 적고 참조하는 형태로 링크를 걸 수 있습니다.

[Bimmermac][id]

[id]: https://bimmermac.com "Bimmermac!"

변환 후 :

Bimmermac

텍스트를 바로 링크할 수도 있습니다.

[Bimmermac][]

[Bimmermac]: https://bimmermac.com "Bimmermac!"

변환 후 :

Bimmermac

주소를 바로 링크할 수도 있습니다.

<https://bimmermac.com>

<email@email.com>

변환 후 :

책갈피

현재 페이지의 특정 위치로 이동할 수 있습니다.

# 목차
  * [1장](#1장)
  * [2장](#2장)
  * [3장](#3장)

위 링크를 클릭하면 아래의 위치로 이동하게 됩니다.

## 1장 <a id="1장"></a>
1장 내용

## 2장 <a id="2장"></a>
2장 내용

## 3장 <a id="3장"></a>
3장 내용

각주

각주3[^3]

[^3]: 각주3 내용

변환 후 :

각주3¹

이미지

![대체 텍스트](https://c1.staticflickr.com/1/358/32541705542_e6b525a7af_o.jpg)

변환 후 :

대체 텍스트

![대체 텍스트](https://c1.staticflickr.com/1/358/32541705542_e6b525a7af_o.jpg "툴팁 메시지")

변환 후 :

대체 텍스트

이미지도 [id]를 지정하여 참조하는 형태로 사용할 수 있습니다.

![대체 텍스트][id]

[id]: https://c1.staticflickr.com/1/358/32541705542_e6b525a7af_o.jpg "툴팁 메시지"

변환 후 :

대체 텍스트

단어 정의

일반적으로 쓰이진 않고, 워드프레스에서만 제공되는 형식인 것 같습니다. 현재 문서에 자주 출현되는 단어의 의미를 정의하는 안내 툴팁을 제공합니다.

HTML을 사용해 봅시다.

*[정의할단어]: 단어의 의미

변환 후 :

HTML을 사용해 봅시다.

참고

각주3 내용 ↩

3 Comments

dongyulseo
2017-05-29 at 5:36 오후
답글

감사합니다! 정말 좋은 정보네요
Fruitfulife
2017-07-20 at 10:24 오전
답글

정리 잘 해주셔서 감사합니다. 같은 플러그인을 사용하는데도 제 블로그보다 훨씬 깔끔해보입니다. 테마가 달라서일까요?
- jihunx 글쓴이
  2017-07-21 at 7:25 오후
  답글
  
  저는 테마를 제가 좀 수정해서 사용하고 있습니다.

설치형 워드프레스를 위한 마크다운 문법

최종 업데이트 : 2017년 2월 1일 오전 9시 28분

원문

제목 스타일

h1 제목

h2 제목

h3 제목

h4 제목

h5 제목

h6 제목

줄바꿈

코드

인라인 코드

코드 블럭

문법 강조

코멘트

구분 선

인라인 HTML

텍스트 스타일

굵게

기울임꼴

취소선

언더라인(밑줄)

인용

리스트

순서 없는 리스트

순서 있는 리스트

표

텍스트 오른쪽 정렬

링크

기본 링크

참조 링크

책갈피

각주

이미지

단어 정의

참고

관련 글

3 Comments

댓글 남기기응답 취소

태그

이메일로 블로그 구독하기