Sublime Text3をマークダウンに対応させる方法
Tuesday,June 21,2016

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

OmniMarkupPreviewer_eye


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


OmniMarkupPreviewer


マークダウン記法に対応させるためのパッケージ「OmniMarkupPreviewer」をインストールします。

一番の特徴は、マークダウン記法で編集中に、ブラウザ上でリアルタイムプレビューが可能になる点です。
OmniMarkupPreviewer001


Syntaxの選択


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


OmniMarkupPreviewer004

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


OmniMarkupPreviewer002

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


OmniMarkupPreviewer003

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


外部ブラウザからプレヴュー


OmniMarkupPreviewerを使いたくなる最大の特徴である、リアルタイムプレビュー機能です。

Syntaxの設定を済ませておきます。


OmniMarkupPreviewer005

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

Sublime Text3上での書き込みが、文字通りほぼリアルタイムで反映されます。


HTMLへ変換


編集作業が終わったらブログ絵の投稿をしますが、ブログ側はマークダウン記法には対応していませんので、HTML形式に変換しないといけません。

HTML形式への変換方法は、2種類あります。”HTMLファイルへの書き出し”と”HTML形式でクリップボードへコピー”です。


htmlファイルの書き出し


OmniMarkupPreviewer006

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


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


html形式でコピペ


OmniMarkupPreviewer007

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


ペーストして貼り付けることで使用します。

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


余分なタグを削除


OmniMarkupPreviewerでは、HTML変換をすると、自動でheadタグやbodyタグなども生成されます。

便利な機能ですが、ブログ投稿用の記事として使うには不要なタグですので、削除して使用します。


OmniMarkupPreviewer008

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


まとめ


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


マークダウン記法をメインで使うには、やはり使いやすいエディタは必須です。

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


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

コードエディタということで難しそうなイメージでしたが、とても使いやすいですね。





posted by taks at 20:16 | Comment(0) | TrackBack(0) | PC
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL