Hexoのマークダウンのレンダラーをmarkedからmarkdown itに変更

投稿日 編集日 カテゴリ 、 、 Coauthor：Yuto Uehara 単語数： 595 読書の時間 ≈ 3 分

こんにちは！ROOXIM株式会社COO 上原です。
今回は、マークダウンのレンダラーをmarkedからmarkdown itに変更していこうと思います。
なぜ変更するのかというと、画像をマークダウンで記事を記載した際に画像のサイズを指定できるようにしたいからです。
通常マークダウンでは、画像のサイズを指定することができません。
しかし、markdown itのプラグインを利用することで、画像のサイズを指定できるようにできます。

どうなるの？

通常画像は以下のマークダウンで表示できます。

1
![img](sample_image.png)

実際に表示した例は以下です。
img

特にサイズが指定されていません。

しかし以下の様にマークダウンを記載することでサイズを指定できるようになります。

1
![img](sample_image.png =200x)

実際に表示した例は以下です。
img
上の例では幅を200pxとしています。
下の例は高さを200pxとしています。

1
![img](sample_image.png =x200)

実際に表示した例は以下です。
img

ちなみに高さ幅ともに指定する場合は以下となります。

1
![img](sample_image.png =200x200)

実際に表示した例は以下です。
img

とこんな感じにサイズが指定できるようになります。

セットアップ

Hexoはデフォルトでhexo-renderer-markedが使われていますので、
hexo-renderer-markedからhexo-renderer-markdown-itに切り替える必要があります。
ではセットアップしていきましょう。

hexo-renderer-markdown-itをインストール

以下のコマンドでhexo-renderer-markdown-itをインストールします。

1
npm i hexo-renderer-markdown-it --save

markdown-it-imsizeをインストール

markdown-it-imsizeは画像のサイズを指定するmarkdown-itのプラグインです。
以下のコマンドでmarkdown-it-imsizeをインストールします。

1
npm i @mdit/plugin-img-size --save

hexo-renderer-markdown-itを設定

以下の設定を_config.ymlに追加します。

_config.yml
1
2
3
4
5
6
markdown:
  preset: default
  render:
    html: true
  plugins:
    - name: 'markdown-it-imsize'

hexo-renderer-markedをアンインストール

hexo-renderer-markedがhexoをセットアップした際にインストールされていますが、
hexo-renderer-markdown-itと競合するため削除します。
以下のコマンドでhexo-renderer-markedをアンインストールします。

1
npm remove hexo-renderer-marked

最後に

以上で画像のサイズが指定できるようになります。
Hexoは何でも出来て便利ですね！