Sublime Text 2にLiveReloadを導入してMarkdown Previewを快適に!!
更新日:2022.07.02
作成日:2013.05.20
Jekyllを使うからには、Markdownをプレビュー出来るエディタが欲しくなる。
Markdownをプレビュー出来るエディタと言えば、 Kobito - プログラミングのメモやスニペットの記録に最適なMacアプリケーション が思い浮かぶ。リアルタイムプレビューの名にふさわしく、かなり快適。
Kobito - プログラミングのメモやスニペットの記録に最適なMacアプリケーション
しばらくは、Kobitoでいいかと思っていたが、ターミナルから起動できても、ファイルの読み込みがどうも出来ない。どうせならターミナルからコマンドを叩いて、Markdownのひな形をシームレスに編集したい。
探していたところ、Sublime Text 2のプラグインに、LiveReloadというものがあるみたいなので、試してみる。
前提
- Sublime Text 2に Package Controlを導入済み
- 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
TECH
2013.11.24
Jekyllのバージョンアップ
TECH
2013.05.23
Jekyllのお勉強 -YAML部分と記事本文を分離する正規表現-
TECH
2013.04.24
Octopressに「続きを読む」のプラグイン導入
TECH
2013.02.03
はてなダイアリーからJekyllへお引越し
TECH
2017.01.08
静的サイトジェネレータ「Hugo」でシンプルブログサイトを構築する
TECH
2015.08.30
JekyllからHugoへの移行ポイント
TECH
2015.05.08
jekyll vs middleman
TECH
2014.12.13
Jekyllのタグとカテゴリを整理するために、一覧表示するWebアプリ(個人用)をつくった