読者です 読者をやめる 読者になる 読者になる

ノグチ雑記

自転車が好きな情報系田舎っぺ学生のテキトーな雑記

最強のMarkdownエディタの作り方

インドア-パソコン インドア

簡単な文書やちょっとしたメモ書きにとても便利なMarkdownですが、これを書くためのエディタは無数にあり、正直どれを使えばいいのか迷ってしまいます。 僕もこれまでに MacDownMouStackEdit などのアプリやサービスを使ってきましたが、どれもイマイチしっくりくるものではありませんでした。

しかし、いろいろと模索していくうちに遂に最強の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 をシンタックスハイライトさせます。

完成するとこんな感じになります。

f:id:kaede-ngc:20141101235109p:plain

動いている様子は下のMarkmonのページに掲載されています。超リアルタイムでヌルヌル動きます。

Markmon

Sublime Text 3

下のリンクのDownloadからサクッと最新バージョンの Sublime Text 3 をダウンロードしてきます。

Sublime Text 3 のタウンロード

ダウンロードできたらインストールします。

Package Control

Package Controlとは、Sublime Text 3 のパッケージの管理がめちゃくちゃ簡単になります。逆に言うと、これがないと Sublime Text 3 はただのゴミです。

下のリンクのSUBLIME TEXT 3というタブの中に書かれているものをすべてコピーします。

Package Control のダウンロード

次に Sublime Text 3 のメニューバーから"View"→"Show Console"でエディタの下にコンソールを開き、その中にさっきコピーしておいたものをペーストしてEnterを押してしばらくすると Package Controlがインストールされています。

最後に、Sublime Text 3 を再起動させることで使用可能となります。

pandoc

下のリンクからサクッと最新バージョンの pandoc をダウンロードしてきます。

pandoc のダウンロード

ダウンロードできたらインストールします。

次にSublime Text 3 で"⌘ + ⇧ + P"を押してPackage Controleを起動。"Install Package"と入力してEnterを押しす。出てきた窓で"pandc"と入力後にEnterで Sublime Text 3 でのpandocというパッケージをインストールします。

f:id:kaede-ngc:20141101235529p:plain

Markmon

これが今回1番重要となる拡張機能です。この Markmon を使うことによって、書いているMarkdownを超リアルタイムでブラウザ上に表示させていきます。

また、MarkmonはmathjaxというLaTeXのコマンドで記述された数式を自動的にきれいな数式に置き換える事のできるツールを同胞しているので、その筋の方々にはとても便利です。

Markmonのインストールには node.js というWeb界隈でとても素晴らしいと賞賛されているものが必要となるので、はじめにそれをダウンロード、インストールする必要があります。下のリンクからダウンロードして、インストールしてください。

node.js のダウンロード

次にターミナル上で以下のコマンドを入力してください。

$ 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" を選択して終了です。

このように綺麗にシンタックスハイライトされます。

f:id:kaede-ngc:20141102000130p:plain

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行をコメントアウトしてセーブすることで終了です。

f:id:kaede-ngc:20141102001358p:plain

まとめ

最強のMarkdownエディタが完成しました。

新規ファイルでシンタックスをMarkdown Extendedに指定し、Package Controlで "Markmon launch" と入力することで、超リアルタイムビューが始まります。

めっちゃサクサクです。とても気持ちいいです。

スニペットとかの設定をしたらもっと最強のエディタになります。


この記事を書くにあたり、以下のページを参考にしました。