Hexo

Hexo 마크다운 플러그인 변경하기

🗓 ⏰ 소요시간 16 분

저번 포스트에서 마크다운은 어떤 종류가 있고, 어떻게 비교하고 선택할 수 있는지 확인해봤습니다.

마크다운의 종류와 선택

그렇다면 Hexo 에서는 어떤 마크다운을 사용하고 있을까요? Hexo 의 패키지를 살펴보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": ""
  },
  "dependencies": {
    "hexo": "^3.0.0",
    "hexo-generator-archive": "^0.1.0",
    "hexo-generator-category": "^0.1.0",
    "hexo-generator-index": "^0.1.0",
    "hexo-generator-tag": "^0.1.0",
    "hexo-renderer-ejs": "^0.1.0",
    "hexo-renderer-stylus": "^0.2.0",
    "hexo-renderer-marked": "^0.2.4",
    "hexo-server": "^0.1.2"
  }
}

Hexo에 기본적으로 설치되는 마크다운 플러그인 hexo-renderer-markdown 을 살펴보면 marked.js 라는 파서를 사용하고 있다는 것을 알 수 있습니다. 이 파서는 CommonMark(v0.28) 과 GFM (v0.28) 을 지원하고 있죠. 즉, Hexo 에서는 CommonMark 와 GFM 에서 지원하는 기능들을 사용할 수 있다는 뜻입니다.

_config.yml 에서 할 수 있는 마크다운 설정은 다음과 같습니다.

1
2
3
4
5
6
7
8
9
10
marked:
  gfm: true # GitHub flavored markdown 지원
  pedantic: false # 오리지널 마크다운 사용
  sanitize: false # HTML 무시
  tables: true # GFM 테이블 지원
  breaks: true # GFM
  smartLists: true # 오리지널 마크다운보다 스마트한 리스트
  smartypants: true # Use "smart" typograhic punctuation for things like quotes and dashes.
  modifyAnchors: '' # Use for transform anchorIds. if 1 to lowerCase and if 2 to upperCase.
  autolink: true # 오토링크 지원. 텍스트에서 링크를 자동으로 인식.

사실 Hexo 기본 렌더러만으로도 충분합니다만, 요즘들어 부족함을 느끼고 있는 것이 바로 ‘각주’(footnotes)입니다. 각주는 보통 이야기를 짤막하게 보충하거나 출처를 밝힐 때 사용하는데 블로그를 하면서 특히 더 중요하다고 생각합니다. 왜냐하면 명확한 출처를 밝혀야 근거도 명확해지고, 참고한 내용이 있다면 명시하는 것이 원저작자에 대한 예의겠죠.

하지만 GFM을 지원하는 Hexo 기본 렌더러에서는 각주를 지원하지 않습니다. 지난 포스트에서도 확인했었죠. 이 대신 사용할 markdown-it은 CommonMark 와 GFM 스펙을 따라 javascript로 만든 파서로, 모듈 설치에 따라 기능 확장이 가능합니다. 기본적으로 각주를 지원하지 않지만 모듈을 설치해서 각주 기능도 사용 가능하죠. Hexo 에는 이를 이용한 플러그인이 두 가지가 있습니다.

저는 첫 번째 플러그인을 사용해보겠습니다. 두번째 플러그인이 사용할 수 있는 플러그인이 더 많고, 추가 확장이 가능하지만 더 심플한 첫 번째 플러그인이 마음에 드네요.

Main Features

사용할 수 있는 기능들은 다음과 같습니다.

  • Markdown / CommonMark / GFM 지원
  • 기본 렌더러 (hexo-renderer-marked) 보다 빠름
  • abbr (두문자어, 약어에 사용할 수 있는 <abbr> 태그)
  • footnote (각주)
  • ins (밑줄)
  • sub (아래첨자)
  • sup (위첨자)

플러그인 설치

기존 렌더러보다 빠르다는데 얼마나 빠를지 궁금하네요. 기존 렌더러를 삭제하고, 새로운 렌더러를 설치합니다.

1
2
$ npm un hexo-renderer-marked --save
$ npm i hexo-renderer-markdown-it --save

플러그인 설정

설치했다면 별 다른 설정 없이 사용 가능합니다. 기본 스펙은 GFM 이고 _config.yml 에서 변경이 가능합니다.

Default (GFM)

기본값은 GFM 입니다.

1
markdown: 'default'

CommonMark

1
markdown: 'commonmark'

Zero

zero 로 설정하면 오리지널 마크다운을 지원하는데 굳이 쓸 필요는 없을 것 같습니다.

1
markdown: 'zero'

플러그인 설정 (고급)

추가 기능을 살펴보겠습니다. 플러그인 부분에서 보실 수 있듯이, 총 다섯개의 플러그인이 사용 가능합니다. 필요없는 기능은 빼도 되겠죠. 각 항목에 대한 자세한 내용은 해당 링크를 참고하시길 바랍니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  plugins:
    - markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup
  anchors:
    level: 2
    collisionSuffix: 'v'
    permalink: true
    permalinkClass: header-anchor
    permalinkSymbol:

설치도 했으니 각주 한번 사용해보겠습니다.[1] 잘 되네요. 이번 포스팅에서는 Hexo 에서 사용하는 기본 마크다운 렌더러를 변경해봤습니다.

  1. 1.이 플러그인의 각주는 pandoc 에서 정의한 내용을 바탕으로 만들어졌습니다. ↩
Share