最強のMarkdownエディタの作り方
簡単な文書やちょっとしたメモ書きにとても便利なMarkdownですが、これを書くためのエディタは無数にあり、正直どれを使えばいいのか迷ってしまいます。 僕もこれまでに MacDown や Mou 、StackEdit などのアプリやサービスを使ってきましたが、どれもイマイチしっくりくるものではありませんでした。
しかし、いろいろと模索していくうちに遂に最強のMarkdownエディタへと辿り着くとことができました。
それは『Sublime Text 3』というマルチプラットフォームのテキストエディタです。
といっても、このエディタ自体は何ら普通のテキストエディタであり、これにいくつかの拡張機能を付加させることで最強になります。
Sublime Text 3 に付加していく拡張機能は次の6つです。
- Package Control ･･･ パッケージの管理を簡単にするやつです。基本中の基本です。
- Markmon ･･･ 書いているMarkdownをリアルタイムでブラウザに表示させます。
- pandoc ･･･ MarkmonとかTeXとかHTMLとかに互換性をもたせるものです。
- Table Editor ･･･ Markdownでの表組を超カンタンに書くためのものです。
- Markdown Extended ･･･ Markdown 内にあるコードをシンタックスハイライトさせます。
- Monokai Extended ･･･ Markdown をシンタックスハイライトさせます。
完成するとこんな感じになります。
動いている様子は下のMarkmonのページに掲載されています。超リアルタイムでヌルヌル動きます。
Sublime Text 3
下のリンクのDownloadからサクッと最新バージョンの Sublime Text 3 をダウンロードしてきます。
ダウンロードできたらインストールします。
Package Control
Package Controlとは、Sublime Text 3 のパッケージの管理がめちゃくちゃ簡単になります。逆に言うと、これがないと Sublime Text 3 はただのゴミです。
下のリンクのSUBLIME TEXT 3というタブの中に書かれているものをすべてコピーします。
次に Sublime Text 3 のメニューバーから"View"→"Show Console"でエディタの下にコンソールを開き、その中にさっきコピーしておいたものをペーストしてEnterを押してしばらくすると Package Controlがインストールされています。
最後に、Sublime Text 3 を再起動させることで使用可能となります。
pandoc
下のリンクからサクッと最新バージョンの pandoc をダウンロードしてきます。
ダウンロードできたらインストールします。
次にSublime Text 3 で"⌘ + ⇧ + P"を押してPackage Controleを起動。"Install Package"と入力してEnterを押しす。出てきた窓で"pandc"と入力後にEnterで Sublime Text 3 でのpandocというパッケージをインストールします。
Markmon
これが今回1番重要となる拡張機能です。この Markmon を使うことによって、書いているMarkdownを超リアルタイムでブラウザ上に表示させていきます。
また、MarkmonはmathjaxというLaTeXのコマンドで記述された数式を自動的にきれいな数式に置き換える事のできるツールを同胞しているので、その筋の方々にはとても便利です。
Markmonのインストールには node.js というWeb界隈でとても素晴らしいと賞賛されているものが必要となるので、はじめにそれをダウンロード、インストールする必要があります。下のリンクからダウンロードして、インストールしてください。
次にターミナル上で以下のコマンドを入力してください。
$ sodo npm install -g markmon
このコマンドを実行することによってインストールされます。
もともとあるmarkmonというパッケージをSublime Text 3 で使えるようにしたものらしいです。
次にSublime Text 3のPackage Controlで Markmon というパッケージをインストールします。
Markdown Extended
これはMarkdown内にあるソースコードをシンタックスハイライトさせます。これによって、プログラムに関する記事を書く際に文章とソースコードがごちゃ混ぜになることなく、見やすいMarkdownとなります。
これの導入は簡単で、Sublime Text 3のPackage Controlから "Markdown Extend"をインストールしてくるだけです。
Monokai Extended
これはSublime Text 3のMarkdown自体をシンタックスハイライトさせるためのものです。Markdownの読みやすさが、ぐんっと上がります。
これの導入も簡単で、Sublime Text 3 のPackage Controlから "Monokai Extended" をインストールし、その後メニューバーの "Preferences"→"Color_Scheme"→"Monokai Extended" → "~~~ Bright" を選択して終了です。
このように綺麗にシンタックスハイライトされます。
Table Editor
これも今回の核となる部分の1つです。Markdownにおける表組みはとてもめんどくさいのですが、これによって表組みを書くときの作業効率がかなり上がります。
まず例のPackage Controlで "Table Editor" をインストールします。
次に新規ファイルを開きシンタックスをMarkdown Extendedを選び、またもやPackage Controlで "Table Editor: Enable for current syntax"を選択することで使用可能となります。
仕上げ
Sublime Text 3 は日本語入力において、Tab変換の挙動がおかしいので、直します。
はじめに、
Library/Application Support/Sublime Text 3/Packages/Default
というディレクトリを作り、メニューバーの"Preferences" → "Key Bindings - Default"を開き、"⌘ + S"でセーブします。
その後、Sublime Text 3以外のエディタで、このファイルの92行から101行をコメントアウトしてセーブすることで終了です。
まとめ
最強のMarkdownエディタが完成しました。
新規ファイルでシンタックスをMarkdown Extendedに指定し、Package Controlで "Markmon launch" と入力することで、超リアルタイムビューが始まります。
めっちゃサクサクです。とても気持ちいいです。
スニペットとかの設定をしたらもっと最強のエディタになります。
この記事を書くにあたり、以下のページを参考にしました。
