💻 개발 · 서버

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

By jihunx
2017-01-24 5 Min Read
3

최종 업데이트 : 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>

변환 후 :

언더라인


인용

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

변환 후 :

인용문입니다. 


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

변환 후 :

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


리스트

순서 없는 리스트

  • 아래 중의 하나로 순서 없는 리스트를 시작할 수 있습니다.
* 별표
- 대시
+ 플러스

예시

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

변환 후 :

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


순서 있는 리스트

  • 숫자는 1만 계속 입력해도 순차적으로 숫자가 자동으로 증가합니다.
  • 탭이나 스페이스를 통해 목차의 하위 항목을 만들 수 있습니다.
1. 하나요
2. 둘이요
3. 셋이요
4. 넷이요
5. 다섯이요
6. 여섯이요
7. 일곱이요
8. 여덟이요

변환 후 :

  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 내용

변환 후 :

각주31


이미지

![대체 텍스트](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을 사용해 봅시다.


참고

  1. 각주3 내용 ↩

관련 글

  1. WordPress GitHub Sync 플러그인으로 GitHub와 워드프레스 동기화하기
  2. Visual Studio Code에서 Markdown을 이용해 보기
  3. GitHub를 이용해 WordPress에 글을 쓰고 동기화하는 방법
  4. Visual Studio Code 나만의 테마 만들기

Tags:

작성자

jihunx

IT, Planning

Follow Me
다른 기사
3 댓글

  2. 정리 잘 해주셔서 감사합니다. 같은 플러그인을 사용하는데도 제 블로그보다 훨씬 깔끔해보입니다. 테마가 달라서일까요?

    답글

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다