1. SIS Lab
  2. >
  3. Blog
  4. >
  5. Sublime Text 2にLiveReloadを導入してMarkdown Previewを快適に!!

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

更新日:2020.08.08 作成日:2013.05.20

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

感想

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

B! Pocket
スポンサーリンク

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

2014.12.13

Jekyllのタグとカテゴリを整理するために、一覧表示するWebアプリ(個人用)をつくった

TECH

2014.12.02

Jekyllに月別アーカイブを実装する