MogHouse

備忘録と忘備録どっちが正しいんだっけ

【最強のMarkdownエディタを求めて三千里番外編】テキストエディタのMarkdown表示機能を比較してみた

f:id:mogy:20160805200437p:plain

Markdownエディタを検討する上で候補の一つとして
良く挙げられるのが、AtomSublime Textといった
今どきのテキストエディタMarkdownエディタとして使う方法。

僕も真っ先に考えたのだが、何となく後回しにしていた。
だって設定めんどくさそうじゃん。

目ぼしいMarkdownエディタは一通りレビューしたので、
ようやく重い腰を上げることにした。

今回はAtomSublime Text、Visual Stdio Codeという
3つのエディタのMarkdown表示機能を比較してみる。

以下は各エディタのインストール手順やパッケージの紹介。

Atomのインストール

公式サイトからダウンロードする。

Atom

初期設定は以下のサイトを参考に。

astone.jeez.jp

僕はとりあえず日本語化とテーマの設定だけやった。

Markdown用パッケージの追加
  • language-markdown
    シンタックスハイライトや自動インデント等の機能を追加

  • markdown-scroll-sync
    エディタとプレビューのスクロール同期機能を追加

  • markdown-pdf
    PDF出力機能を追加

  • markdown-preview-opener
    自動プレビュー表示機能を追加

とりあえずこれだけ入れとけば良さそう。
markdown-previewは標準で入ってるので追加する必要は無い。
設定の「Use GitHub.com style」にチェックを入れておくと
プレビューがそれっぽい表示になるのでおススメ。

使ってみた感じ
数式やチェックボックスの表示に対応

数式を表示したい場合はmarkdown-preview-plusmathjax-wrapperを追加する。
使い方は以下のサイトに詳しく書いてある。

AtomのMarkdown Previewで数式を表示 | nkmk log

ただ、こちらだとチェックボックスが表示されないみたい。
フローチャートTOCに対応してないのも残念。

スクロールが同期する

他のMarkdownエディタと同様にスクロールがずれてしまうのだけど、
エディタのカーソル位置にスクロールを同期させる機能があるので、
編集時にはきちんと同期した状態で表示できる。
スクロールが滑らかじゃないのはちょっと気持ち悪いけど。

全体的にもっさり

起動がやたらと遅い。もっと早く起動して欲しい。
置換が遅いしメモリ消費もデカいし、テキストエディタのくせに
なんだかIDE使ってるような気分になる。

Sublime Textのインストール

公式サイトからダウンロードする。

Sublime Text: The text editor you'll fall in love with

初期設定は以下のサイトを参考に。

webmem.hatenablog.com

Markdown用パッケージの追加
  • OmniMarkupPreviewer
    プレビュー表示機能を追加

  • Monokai Extended
    Markdownシンタックスハイライト表示を追加

  • Markdown Extended
    コードのシンタックスハイライト表示を追加

  • Trailing Space
    半角スペースの可視化機能を追加

  • Table Editor
    表作成の支援機能を追加

細かい設定や使い方は以下のサイトに詳しく書いてある。

マークダウンエディタとして使う方法 [Sublime Text 3 の参考書(実践編)Wiki]

使ってみた感じ
動作がサクサク

Atomと比べると断然起動早いし、キビキビと動いてくれる印象。
パッケージ入れたときに再起動が要らない点も嬉しい。

入力支援が強力

Table Editorが凄く便利だった。
ショートカットキーでセル単位で移動したり
列や行単位で内容を入れ替えたり出来るし、
自動で幅を合わせて見やすく表示してくれたりと至れり尽くせり。

プレビュー画面が無い

OmniMarkupPreviewerを入れれば一応プレビュー機能が使えるものの、
ブラウザ上で表示する形になる。
また、スクロール同期が出来ないのも難点。

Visual Studio Codeのインストール

公式サイトからダウンロードする。

Microsoft Virtual Academy のご紹介

初期設定は以下のサイトを参考に。

qiita.com

僕は「その他の設定」の項目だけ設定ファイルに記述した。

Markdown用パッケージの追加
  • Auto-Open Markdown Preview
    自動プレビュー表示機能を追加

  • Markdown helper
    Markdown入力のキーボードショートカットを追加

  • md2pdf
    PDF出力機能を追加

プレビューの見た目を変えたい場合は自分でCSSを追加する必要がある。
設定方法は以下のサイトに詳しく書いてある。

qiita.com

使ってみた感じ
日本語標準対応

起動した時点でとりあえず使える感じになっているのは良い。
使い込もうと思ったら結局設定弄らなきゃならないけど。

そこそこ軽い

Sublime Text程ではないものの、そこそこ軽快に動作してくれる。
というかAtomが重過ぎるだけのような気がする。

有用なパッケージが少ない

AtomやSublimeTextに比べると、公開されてから日が浅い為か
あまり有用なパッケージが見つからない。
今後徐々に増えていくのだろうけど、現状ではあまり使い勝手が良くない。

総評
Atom Sublime Text Visual Studio Code
起動速度 ×
拡張表現 × ×
スクロール同期 × ×
PDF出力
入力支援

ざっくり動かしてみた感じだとこんな評価。
今後便利なパッケージが公開されていくのかもしれないけど、
現状はまだまだメインとして使う気にはなれないという印象。

この中から選べって言われたらSublime Textかなぁ。
拡張表現やスクロール同期に対応していないのが痛いけど、
起動早いし何よりTable Editorが便利すぎた。

最後に

Table Editorは捨てがたいけど、使いやすさを考えたら
専用のMarkdownエディタを使った方が良さそう。

とはいえ元々AtomSublime Textを使い込んでる人なら
パッケージを入れてMarkdownエディタとして使うのも良いかもしれない。
Visual Studio CodeのMarkdown表示機能はまだまだおまけ機能な印象。