HOME   »   Sublime Text  »  MacにOmniMarkupPreviewerをインストールする方法とその使い方
RSSフィード

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のインストール方法

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」の使い方についての紹介でした。

関連記事





スポンサーリンク

過去記事セレクション

当ブログの過去記事の中で、オススメの記事25個をまとめたページを作成しました。500記事を超えた中から厳選していますので、どれもオススメできる記事となっています。もしも興味がありましたら、是非一度ご覧ください。
公開記事が500を超えたので、過去記事の中からオススメを25個セレクトしてみました



▼このカテゴリの最新記事
Relate Entry
Entry TAG
SublimeText   ブログ   テキストエディタ   OmniMarkupPreviewer  
Comment
Trackback
Comment form
スポンサードリンク
楽天
2014年7月現在使用しているブログ用iPhoneアプリ16個
iPhoneホーム画面
人気エントリー
先月の人気記事
第1位(→0)
iPhoneにある写真(画像)をセブンイレブンで現像する方法

第2位(→4)
総計290個以上掲載!iPhoneアプリのURLスキーム一覧

第3位(↗︎2)
【iPhone】秘密の質問を忘れたのでAppleのサポートに電話してリセットしてもらった

第4位(↘︎2)
理系大学生なら絶対覚えておくべきWordの数式のショートカット

第5位(↘︎1)
iPhoneのパスコードを10回間違えると再入力までに60分必要

第6位(↘︎1)
SoftbankのiPhone4s→iPhone5sへ機種変更した時の料金試算

第7位(↗︎3)
iPhoneの画面を録画できるMac・Windowsアプリ「Reflector」のインストール方法・使い方

第8位(↘︎4)
iPhone/iPadのパスコードロックを10回間違えた時のデータ消去機能を実行してみた

第9位(↗︎4)
xRecというiPhone画面を録画できるアプリが再び登場!

第10位(↘︎2)
【iPhone】秘密の質問を忘れて間違えすぎるとApple IDが8時間ロックされる

第11位(→0)
iPhoneの写真を1枚5円で現像出来るネットプリントジャパン!

第12位(→0)
パラメータ有りiPhoneアプリのURLスキーム一覧

第13位(↗︎30)
青春18切符で東京から大阪へ~東海道線を突っ走る旅(1日目)

第14位(↗︎55)
青春18切符を利用した旅行時に活躍したiPhoneアプリのまとめ

第15位(↗︎16)
セリアでiPhoneの防水ケースを購入!風呂場で使うときに便利!

全記事表示リンク
サイト内検索
プロフィール

nasimeya

Author:nasimeya
Twitterアカウント→@nasimeya
iPhone5S/iPad3/iPad mini/MacBookAir13inch/Nexus5を現在所持しており、アプリとか紹介を主にしています。LAMYなど文房具もちょくちょく。ブログは楽しく書くことを心掛けております。

日にの観察ブログの更新は停止しています。

新しいブログはこちら⇒なしめやブログ(http://nasimeyablog.com

2013年5月現在利用している主力iPhoneアプリ26個
iPhoneホーム画面
2013年5月現在利用しているブログ用iPhoneアプリ13個
iPhoneホーム画面
iPad mini用おすすめアプリ8選

PAGE TOP