Sublime Text 3をMarkdownエディタにする方法

LINEで送る
Pocket

「Sublime Text(サブライムテキスト)」をMarkdownエディタとして使えるようにカスタマイズします。

ChromeでプレビューしながらMarkdown

Sublime Text 3にMarkdown記法で書いた内容を、ブラウザでリアルタイムに確認しながら編集することができます。リアルタイムに更新されるのですが動作が非常に軽いです。

Package Controlがインストールされている前提の手順ですので、まだの場合は下記の記事を参考にPackage Controlをインストールしてください。
Sublime Text 3 ポータブル版をインストールして日本語化

スポンサーリンク

5つのパッケージをインストール

Sublime Text 3を快適なMarkdownエディタにするための5つのパッケージをインストールします。

  • OmniMarkupPreviewer – Markdownで書いた文章をブラウザでリアルタイムプレビュー
  • Monokai Extended – Markdownをシンタックスハイライト
  • Markdown Extended – Markdown内のソースコードをシンタックスハイライト
  • Table Editor – Markdownでの表作成を簡単に
  • TralingSpaces – 行末のスペースを表示

OmniMarkupPreviewerは、Sublime Text 3で書いたものをブラウザでリアルタイムにプレビューしてくれたり、HTML形式で出力も可能。出力せずにクリッピボードにHTMLとしてコピーもできます。

Markdown記法では改行したい行の末尾に半角スペースを2ついれる必要があるので、それを視覚的に見やすくするためにTralingSpacesを導入します。

インストール手順

(1)Sublime Text 3の上部メニュー [ ツール(Tools) ] > [ コマンドパレット(Command Palette) ] をクリック。

ショートカットキー
Windows: [ Ctrl ] + [ Shift ] + [ P ]
Mac: [ Command ] + [ Shift ] + [ P ]

コマンドパレットを開く

(2)検索ボックスが現れたら「Package Control: Install Package」と入力 > [ Enter ] キーを押す。

Install Packageと入力する

読み込みに少し時間(数秒)がかかる場合もあります。

Install Packageの読み込み中

しばらくすると再び検索ボックスが現れます。ここから5つのパッケージを1つずつインストールしていきますので、順番に同じ作業を繰り返します。

Install Packageの検索ボックス

(3)まずは「OmniMarkupPreviewer」と入力 > [ Enter ] キーを押す。

OmniMarkupPreviewerのインストール

インストールが始まり完了したら、手順(1)から同じ手順を繰り返します。

手順(3)でインストールするパッケージの名前を入力して [ Enter ] キーを押してください。インストールするのは下記の5つのパッケージです。

  • OmniMarkupPreviewer
  • Monokai Extended
  • Markdown Extended
  • Table Editor
  • TralingSpaces

各パッケージの使い方と設定方法

Monokai Extendedの設定

Sublime Text 3の上部メニュー [ 基本設定(Preferences) ] > [ カラースキーマ(Color Scheme) ] > [ Monokai Extended ] の中から好きなのを選択。

Monokai Extendedの設定

Markdownをシンタックスハイライトしてくれます。

Sublime Text 3の右下が [ Plain Text ] ならこの時点では色が変わりません。次の設定を変更すると色が付きます。

次の項目で設定する予定のMarkdown Extendedのインストールや設定をしない場合は、Sublime Text 3の右下 [ Plain Text ] をクリック > [ Markdown ] > [ Markdown ] を選択するとシンタックスハイライトが有効になります。

Monokai Extendedの設定

ファイルを開いた状態で右下の [ Plain Text ] > [ Open all with current extension as ] > [ Markdown ] > [ Markdown ] を選択すると、開いているファイルの拡張子とシンタックスが紐づけられ、次回からその拡張子は [ Markdown ] が適応されます。

Markdown Extendedの設定

(1)MarkdownファイルをSublime Textで開きます。

Sublime Text 3の上部メニュー [ 表示(View) ] > [ シンタックス(Syntax) ] > [ Open all with current extension as ] を選択。

シンタックスを選択

[ Markdown Extended ] をクリック。

Markdown Extendedを選択

[ Open all with current extension as ] から選択することで、今開いているファイルと同じ拡張子のファイルを開くと同じシンタックスが適応されます。

今回の場合ですと「.txt」の拡張子を持つファイルを開いているので、次回以降もこの拡張子のファイルを開くと [ Markdown Extended ] が適応されることになります。

拡張子とシンタックスを紐づけせず、現在開いているファイルにだけ適応させたい場合は [ 表示(View) ] > [ シンタックス(Syntax) ] > [ Markdown Extended ] を選択します。

こちらはMarkdownの中のソースコードをシンタックスハイライトしてくれます。

シンタックスハイライト表示になった

シンタックスを選択したことで、先ほど設定したMonokai Extendedも有効になり見出しやemタグ等にも色が付きました。

Table Editorの設定と使い方

Table Editorの設定

(1)Sublime Text 3の上部メニュー [ ツール ] > [ コマンドパレット ] をクリック。

ショートカットキー
Windows: [ Ctrl ] + [ Shift ] + [ P ]
Mac: [ Command ] + [ Shift ] + [ P ]

コマンドパレットを開く

(2)コマンドパレットに「Table Editor: Enable for current syntax」か「Enable for current view」のいずれかを入力し [ Enter ] キーを押す。

  • Table Editor: Enable for current syntax – 現在のシンタックスにTable Editorを有効にする
  • Table Editor: Enable for current view – 現在のファイルにだけTable Editorを有効にする

(3)再びSublime Text 3の上部メニュー [ ツール ] > [ コマンドパレット ] をクリック。

(4)コマンドパレットに「Table Editor: Set table syntax ‘Simple’ for current view」を入力して [ Enter ] キーを押す。

Table Editorの使い方

表の作成

まずは下記のように1行目に縦線を3つ、2行目には縦線とハイフン、3行目に縦線1つを入力します。

|||
|-

次にキーボードの [Tab ] キーを押すと、このように表が作成されます。

|   |   |
|---|---|
|   |   |
縦線の「|」は [ Shift ] + [ ¥ ] キーで入力できます。
表の整形

表を作成していると文字数が合わずに形が崩れてしまいますが、表のどこか(最後のセル以外)にカーソルを置き、キーボードの [ Tab ] キーを押すと、このように整形してくれます。

Table Editorで表の整形

最後のセルにカーソルを置き [ Tab ] キーを押すと下に行が追加されます。

Table Editor 行の追加

この他にもたくさんの機能があります。

TralingSpacesの設定

設定は特に必要ありません。

Markdownで改行したい場合は行末に半角スペースを2つ入力しますが、通常ですとスペースが入力されているかどうかパッと見ではわかりません。

そこでTralingSpacesで行末のスペースをハイライト表示されるようにします。ピンク色になっている部分がそうです。

文末の半角スペースがハイライトされた

デフォルトでは全角スペースはハイライトされません。Markdownではあまり影響しませんが意図しない全角スペースはエラーの原因になりますので全角スペースもハイライト表示されるように設定を変更します。

[ 基本設定(Preferences) ] > [ Package Setting ] > [ Trailing Spaces ] > [ Setting User ] をクリック。

Trailing SpacesのSetting Userをクリック

そこに下記のコードを追記し保存します。

{
"trailing_spaces_regexp": " |[ \t]+"
}

これで文中、行末にある全角スペースがハイライト表示されるようになります。

Trailing Spacesで全角スペースも可視化

参考サイト
sublime text 3 全角スペース ハイライト表示

OmniMarkupPreviewerの使い方

OmniMarkupPreviewerの設定はありません。

ここまでで一通り準備ができたのでリアルタイムにプレビュー表示をしながらMarkdown記述で書いてましょう。

ブラウザでリアルタイムにプレビュー

下記のショートカットキーを押すと既定のブラウザが起動します。保存をしなくてもテキストを編集するとリアルタイムにプレビューされます。

ショートカットキー
Windows: [ Ctrl ] + [ Alt ] + [ O ]
Mac: [ Command ] + [ Option ] + [ O ]

ブラウザが起動しない場合は、Sublime Textの右下でMarkdownが選択されているか確認してください。

シンタックスがMarkdownになっているか確認

HTMLタグに変換してクリップボードにコピー

Markdown記法で書いたものをHTMLタグに変換しクリップボードにコピーしてくれます。

ショートカットキー
Windows: [ Ctrl ] + [ Alt ] + [ C ]
Mac: [ Command ] + [ Option ] + [ C ]

この機能を利用してWordPressに貼り付ければ、簡単に記事が完成してしまいます!

ただ、headタグからCSSまでコピーされてしまい、このままブログなどに貼り付けるわけにはいきませんので一手間かかりますが。

下の画像はクリップボードにコピーしたHTMLタグを新規のSublime Text 3に貼り付けたものです。

変換したHTMLタグをクリップボードにコピー

HTMLファイルとして出力

Markdownで書いたファイルと同じ場所にHTMLファイルとして出力してくれます。

ショートカットキー
Windows: [ Ctrl ] + [ Alt ] + [ X ]
Mac: [ Command ] + [ Option ] + [ X ]

プレビューのCSSを編集する方法

見た目を変更したい場合は下記のCSSファイルを編集します。

Webサイトやブログに合わせた装飾にすれば確認もしやすくなりますね。

Markdownプレビュー時のCSSを変更する

インストール版
C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Data\Packages\OmniMarkupPreviewer\public\github.css

ポータブル版
C:\Sublime Text 3\Data\Packages\OmniMarkupPreviewer\public\github.css

HTMLファイルとして出力時のCSSを変更する

インストール版
C:\Users\ユーザー名\AppData\Roaming\Sublime Text 3\Data\Packages\OmniMarkupPreviewer\templates\github-export.tpl

ポータブル版
C:\Sublime Text 3\Data\Packages\OmniMarkupPreviewer\templates\github-export.tpl

まとめ

以上でSublime Text 3のMarkdownエディタ化は終了です。

Markdownを使える環境にするまでが面倒ですが、動作が軽いので快適です。

スポンサーリンク