OmniMarkupPreviewerのCSSを編集する方法

記事内に広告が含まれています。

前回の記事までで、Sublime Text 2のリアルタイムプレビュープラグイン「OmniMarkupPreviewer」の使い方について紹介しました。

OmniMarkupPreviewerのcommand+ option+ Oでプレビュー出来るのは良いのですが、もう少しプレビュー画面を自分のブログと近づけたいです。

例えば、赤い太文字や、キーボードコマンドにしたい時には、classを指定しています。

そこで今回は、OmniMarkupPreviewerでプレビューしたときのCSSを編集する方法について紹介します。

スポンサーリンク
スポンサーリンク

OmniMarkupPreviewerのCSSを編集する方法

OmniMarkupPreviewer-css

▲OmniMarkupPreviewerをインストールして、何も設定しないままだと、文字をclass指定しても何も変わりません。

ここで、classに対して、任意のデザインを指定してみます。

OmniMarkupPreviewer-css

▲ライブラリ→Application Support→Sublime Text 2と進み、

OmniMarkupPreviewer-css

▲Sublime Text 2→Packages→OmniMarkupPreviewerと進み、

OmniMarkupPreviewer-css

▲OmniMarkupPreviewer→Public→github.cssをテキストエディタで開きます。(ここでは、Sublime Text 2で開く事にします。)

OmniMarkupPreviewer-css

▲github.cssファイルを開いたら、四角で囲んだ部分を追記します。(classがbold-redに対して、赤色太文字になるようにしています。)

OmniMarkupPreviewer-css

▲そして再びプレビューしてみると、CSSで指定したように、赤色太文字で反映されました。(うまくいかない場合、キャッシュを削除してみると解決するかもしれません。)

まとめ

OmniMarkupPreviewerのプレビューは編集出来るので、なるべくブログのデザインを反映させたければ、詳細に凝る事は出来ます。

僕は、必要最低限の違いがわかれば十分かなと思い、赤文字やキーボードコマンド用のCSSだけ登録しておきました。

Sublime Text
スポンサーリンク
スポンサーリンク
スポンサーリンク

コメント