Sublime Text

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がhutoakaに対して、赤色太文字になるようにしています。)

OmniMarkupPreviewer-css

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

まとめ

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

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

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

関連記事

  1. sublimetext

    Sublime Text

    Sublime Text 2(日本語)をMacにインストールする方法

    私が最近どうやってブログを書いているのか、手順と使用ツールを公開してみ…

  2. sublimetext

    Sublime Text

    Sublime Text 2のInputSequenceのインストール方法・使い方

    ブログを書く時のMacのエディタをSublime Text 2に変更し…

  3. sublimetext
  4. sublimetext

    Sublime Text

    MacにOmniMarkupPreviewerをインストールする方法とその使い方

    Macでブログを書くためのエディタアプリを、MarsEditからSub…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

カテゴリー

  1. smartever

    Evernote

    SmartEverのワンポイントな使い方
  2. 大阪城

    旅行

    青春18切符大阪の旅2日目(大阪城編)
  3. iPhoneアプリ

    DraftPadに、自分のブログを検索してリンクを張るアシストを導入する方法
  4. goodreader

    iPadアプリ

    GoodReader for iPadへyoutubeを保存する方法
  5. グリコ

    旅行

    青春18切符大阪旅行2日目(道頓堀)
PAGE TOP