Sublime Text 2にLiveReloadを導入してMarkdown Previewを快適に!!

更新日:2022.07.02 作成日:2013.05.20
#Jekyll #Sublime Text

Jekyllを使うからには、Markdownをプレビュー出来るエディタが欲しくなる。

Markdownをプレビュー出来るエディタと言えば、 Kobito - プログラミングのメモやスニペットの記録に最適なMacアプリケーション が思い浮かぶ。リアルタイムプレビューの名にふさわしく、かなり快適。

Kobito - プログラミングのメモやスニペットの記録に最適なMacアプリケーション

しばらくは、Kobitoでいいかと思っていたが、ターミナルから起動できても、ファイルの読み込みがどうも出来ない。どうせならターミナルからコマンドを叩いて、Markdownのひな形をシームレスに編集したい。

探していたところ、Sublime Text 2のプラグインに、LiveReloadというものがあるみたいなので、試してみる。

前提

  1. Sublime Text 2に Package Controlを導入済み
  2. Package ControlからMarkdown Previewをインストール済み

Sublime Text 2にパッケージコントロールを導入!!

LiveReloadのインストール

  • Package Control: Install PackageからLiveReloadをインストール

LiveReload dz0ny/LiveReload-sublimetext2 · GitHub

Markdown Previewの設定

CSSを読みこませるには

Package Settings > Markdown Previewの設定ファイル中にある css:に自分のcssファイルを配置する。

Jekyllの記事の始まりの---と---で囲まれた部分のTitleだけを抜き出してうまく表示させるには

strip_yaml_front_matterをtrueにする。

- "strip_yaml_front_matter": false
+ "strip_yaml_front_matter": true

感想

リアルタイムプレビューとまではいかないが、快適になった。 しばらく、この運用でいってみようと思う。

Related contents