Sublime Text

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

Macでブログを書くためのエディタアプリを、MarsEditからSublime Textに乗り換えました。

その一番の理由といってもいいのが、ブラウザでリアルタイムプレビュー出来るプラグイン「OmniMarkupPreviewer」が使いやすいということです。

MarsEditでもリアルタイムプレビューは出来ていたのですが、プレビュー画面の見え方の調節のしやすさ、また、画像の挿入のしやすさなどを考えると、Sublime Textに軍配が上がるように感じます。

今回は、MacのSublime Text 2にOmniMarkupPreviewerをインストールする方法を紹介します。

なお、インストールした環境は、

  • Mac OS X 10.9.4
  • Sublime Text 2.0.2
  • OmniMarkupPreviewer 2.0.9

です。

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

OmniMarkupPreviewerのインストール方法

OmniMarkupPreviewer

▲まずSublime Text 2を起動して、command+ shift+ Pを押します。

OmniMarkupPreviewer

▲そして、install Packageを検索してEnterを押します。

OmniMarkupPreviewer

▲そして、OmniMarkupPreviewerを検索してEnterを押します。

OmniMarkupPreviewer

▲OmniMarkupPreviewerのインストールが完了すると、上記のようなメッセージが出ます。

OmniMarkupPreviewerの使い方

OmniMarkupPreviewerの主な機能としては、大きく分けて3つあります。

  • ブラウザでプレビューする
    Preview Markup in Browser(command+ option+ O
  • Markdown記法で書いたものをHTMLとして出力
    Export Markup as HTML(command+ option+ X
  • Markdown記法で書いたものをHTMLとしてコピー
    Copy Markup as HTML(command+ option+ C

まずは、頻繁に使うブラウザでプレビューする方法について紹介していきます。

OmniMarkupPreviewer

▲Sublime Text 2のメニューバーから、表示→シンタックス→Markdown→Markdownを選択します。

OmniMarkupPreviewer

▲そして、Sublime Text 2で書いた文章をプレビューするために、option+ command+ O(オー) を押します。

OmniMarkupPreviewer

▲すると、デフォルトで設定しているブラウザ(Google Chrome)でプレビューが開きました。Sublime Text 2で編集すると、Google Chromeでリアルタイムにプレビューが反映されます。

Markdown記法でのプレビューも確認してみます。

OmniMarkupPreviewer

▲Sublime Text 2で上のようにMarkdown記法で書いてみると、

OmniMarkupPreviewer

▲ブラウザのプレビューでは、ご覧のようになります。

OmniMarkupPreviewer

▲ここで便利なのが、左画面をエディタ(Sublime Text 2)、右画面をプレビュー(ブラウザ)にすることです。

こうすれば凄く書きやすいです。

また、ブラウザでプレビュー意外の2つについても紹介します。

OmniMarkupPreviewer

▲ショートカットを使わなくても、Sublime Text 2で書いた文章を選択して右クリックをすると、上のようなダイアログが出現します。任意の操作を行えます。例えば、Copy Markup as HTML(Markdown記法をHTMLとして出力)を押してみましょう。

OmniMarkupPreviewer

▲そして、適当な所にペーストすると、ご覧のような膨大なタグが貼られます。しかし、HTML部分は、図で囲んだ部分のみになります。ここをコピーすれば、HTMLとして取得出来たことになります。

Markdown記法の中にHTMLタグが含まれていても問題なく変換出来る

さて、このMarkdown記法をHTMLとしてコピーできるOmniMarkupPreviewerですが、Markdown記法の中にHTMLタグが含まれていても問題なく変換出来ます。

OmniMarkupPreviewer

▲Markdown記法では、改行がpタグに対応します。その中に、リストタグ(ul)も含まれています。これらの文章を選択して、右クリックしてCopy Markup as HTMLを選択して、HTMLタグをコピーしてみます。

OmniMarkupPreviewer

▲そして、貼付けてみると、ulタグにはpタグで囲まれていません。つまり、Markdown記法の中に、HTML文章が混ざっていても問題ないという事になります。

これにより、pタグはMarkdown記法、他のタグはHTML記法のように、混合した書き方を行えるという事になります。

以上、ここまで、Sublime Text 2でブログを書くのにおすすめのブラウザプレビュープラグイン「OmniMarkupPreviewer」の使い方についての紹介でした。

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

関連記事

  1. sublimetext
  2. sublimetext

    Sublime Text

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

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

  3. sublimetext

    Sublime Text

    OmniMarkupPreviewerのCSSを編集する方法

    前回の記事までで、Sublime Text 2のリアルタイムプレビュー…

  4. sublimetext

    Sublime Text

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

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

コメント

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

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

カテゴリー

  1. webサービス

    Google Readerが2013年7月2日から使用不可・・
  2. shiftit

    Macアプリ

    ショートカットで画面ウィンドウの大きさを綺麗に半分、1/4に出来るMacアプリ「…
  3. iPhoneアプリ

    将棋連盟Live中継アプリのトップ画像背景を固定する事が出来た!
  4. youtube

    iPhoneアプリ

    GoogleからYouTubeアプリがリリース!iOS6向けか?
  5. iphone用防水ケース

    iPhone

    ゲリラ豪雨によるiPhoneの水没を防ぐための防水ケースを持つ!
PAGE TOP