Sublime Text3をマークダウンに対応させる方法【OmniMarkupPreviewer】

Sublime Text3のインストールとHTMLやCSSへの対応設定が済みましたが、ブログエディタとして使うならマークダウン記法とプレヴュー機能には対応させておきたいですね。

マークダウン記法に対応させるためのパッケージ「OmniMarkupPreviewer」をインストールします。
一番の特徴は、マークダウン記法で編集中に、ブラウザ上でリアルタイムプレビューが可能になる点です。

OmniMarkupPreviewerを使用するとき、うまく動かず最初に悩んだのがここでした。

パッケージインストール直後の状態では、プレヴュー機能がグレーアウトしていて選択できませんでした。

ファイル管理で、拡張子を.txt にしている影響か、デフォルトでは「Plain Text」になっています。

ここを「Markdown」に変更してOmniMarkupPreviewerを有効にします。

OmniMarkupPreviewerを使いたくなる最大の特徴である、リアルタイムプレビュー機能です。
Syntaxの設定を済ませておきます。

文章を選択して右クリック(2本タップ)メニューを開きます。「Browser Preview 」を選択すると、ブラウザが立ち上がり、リアルタイムプレヴューが表示されます。
Sublime Text3上での書き込みが、文字通りほぼリアルタイムで反映されます。

編集作業が終わったらブログ絵の投稿をしますが、ブログ側はマークダウン記法には対応していませんので、HTML形式に変換しないといけません。
HTML形式への変換方法は、２種類あります。”HTMLファイルへの書き出し”と”HTML形式でクリップボードへコピー”です。

htmlファイルの書き出し

右クリック（2本指タップ）メニューから「Export Markup as HTML」を選択すると、編集中の元ファイルがあるフォルダに.htmlファイルが生成されます。

ブログ投稿用として使うには、余分なHTMLタグも含まれているので、一部修正が必要です。

html形式でコピペ

右クリック（2本指タップ）メニューから「Copy Markup as HTML」を選択すると、クリップボードへHTMLへ変換された文章がコピーされます。

ペーストして貼り付けることで使用します。
こちらも余分なタグが含まれてしまうため、一部修正が必要ですので、そのまま投稿というわけには行きません。

余分なタグを削除

OmniMarkupPreviewerでは、HTML変換をすると、自動でheadタグやbodyタグなども生成されます。
便利な機能ですが、ブログ投稿用の記事として使うには不要なタグですので、削除して使用します。

閉じタグも忘れずに削除しておきましょう。

マークダウン記法は、慣れてくると非常に使いやすく、閉じタグなどを気にしなくて良いので、スムーズに文章作りに集中できますね。

マークダウン記法をメインで使うには、やはり使いやすいエディタは必須です。
Sublime Text3は、パッケージ機能で好みのカスタマイズが可能なので、非常に使いやすいです。
有名なだけあって利用者も多く、使用法も分からないことがあれば、検索するとすぐに見つかるという利点もあります。

OmniMarkupPreviewerを使うことで、マークダウン記法、リアルタイムプレヴュー、HTML変換と、ブログエディタとして必要な機能を備えたエディタに生まれ変わります。
コードエディタということで難しそうなイメージでしたが、とても使いやすいですね。

created by Rinker

ブログエディタとして有名なものはいくつかありますが、私はSublimeTextを使っています。本来はコードエディタとして有名なSublimeTextですが、パッケージが豊富に揃っているので、ブログエディタとしても設定次第で十分使いやすくなり