Logo wizaman's blog (legacy)

Markdownエディタ色々

October 12, 2015
16 min read
atom brackets haroopad markdown sublime-text visual-studio-code
Previous Post エクストルーパーズ3周年記念対戦会のお知らせ
Next Post RED ASHプロジェクトまとめ
Table of Contents

（2017/11/26追記）情報が古くなったので新しくまとめました→Markdownエディタ再検討

以前にも書いたように、私は普段テキストを書く時はMarkdown形式（拡張子は一般に.md）をよく使います。エディタにはHaroopadを使っているんですが、最近Atomとか良い感じだよと聞いたので少し試してみて・・・結局、まだHaroopadでいいかなって思いました。

とはいえ、せっかくなので今のところの各エディタの印象を軽くまとめることにします。なんか最近リッチなエディタ流行ってますね。

前提条件として、イカを挙げておきます。

  • Windows上でローカルで動作する（Webアプリは対象外）。
  • 文字エンコーディングはUTF-8が使えれば問題ない。
  • リアルタイムプレビューが可能。
  • GFM（GitHub Flavored Markdown）に対応。
    • 改行の反映。
    • テーブルの記述。
    • コードブロックの記述。

Haroopad

Markdown専用エディタ。私が使い始めた頃は日本語の折り返しがダメダメだったりしましたが、アップデートにより目立つ不具合は解決しました。新たな不具合も出ましたが。

  • 良いところ
    • 64bit対応。
    • いくらかのMarkdown拡張記法に対応。
      • GFMだけでなく、Multimarkdown、PHP Markdown Extraに対応。
      • 独自拡張として、数式やダイアグラムの記述が可能（他と互換性がないの嫌だからTOCしか使わないけど）。
    • 常にエディタとプレビューを同時に見れる。
    • エディタのスクロールをプレビューに同期できる（精度は良くないので長文だとずれることも）。
    • TOC（目次）に対応している。[TOC]と書くだけでいい（Ctrl+Shift+Tでも挿入される）。
    • Markdown記法のショートカットが豊富。
      • Ctrl+数字で見出しレベルを簡単に変えられる。
      • まとめてリストにするCtrl+Shift+Lとか、まとめて引用にするCtrl+Shift+Qとか便利。
    • Markdown記法ヘルプを表示（左下アイコンクリックかCtrl+Shift+H）して、そこからテンプレートの挿入もできる。
    • 末尾の空白文字に赤線を引いてくれる。
    • HTML出力が可能（スタイル付き）。
  • 悪いところ
    • 文字エンコーディングがUTF-8、改行コードがCR+LF固定（個人的にあまり困らない）。
    • エディタとプレビューのスクロール同期がずれる。
      • 多分、互いの全体の長さから見た現在位置の割合を見て合わせる単純な実装になっていて、長文書くとつらくなってくる。
    • 拡張記法（一部のGFM記法を除く）を無効にするオプションがない。
      • ++が下線にされるため、C++など気軽に書けないのがかなり困る。
      • 仕方ないから、バッククォートで囲ってコード扱いにしないとまともに表記できない。
    • エディタ内でコードブロックのシンタックスハイライトが効かないついでにパースがおかしい。
      • コードブロック内で<hoge>みたいなことを書くとエディタ側ではHTMLタグとして扱ってシンタックスハイライトが壊れる。プレビューは正しいのに。C++のテンプレートやC#のジェネリックなどで困る。
    • テーブルの記述が面倒。整形もしてくれない。
      • テンプレートを書き出すショートカットがない。
      • 記法ヘルプからテーブルのテンプレートを書き出せるが、マウス使わないといけないし・・・。
      • 編集をサポートするようなリッチな機能もない。
    • ウィンドウ制御がイケてない（最大化を記憶して次回から最大化状態で起動とかしてくれない）。
    • 公式情報が韓国語なのでリリースノートとか見ても何が書いてあるのかよくわからない。英語にしてほしい。
    • 最新版（v0.13.1）で、検索/置換の入力欄をフォーカスしていても、コピー/貼り付けが何故かエディタに適用されるバグが存在。早く直してください。
    • コードブロックでC#の言語名は「cs」（GFM的にはcsharpのエイリアス）に対応しているが、「csharp」には対応していない。

長いこと使ってるので、細かい不満も多いですが、基本的に使いやすいです。ショートカットが強力ですね。細かい不満が多いからこそ、他のエディタも試しているのですが、結局戻ってきてしまうという感じ。

プレゼンテーションモードという機能があるので、Markdownでサクッとスライド作りたいという用途にも良いかもしれません。ダイアグラムなどの拡張記法はそのためにある気がします。

フォントを変えないと日本語表示が気持ち悪いので設定しておくべき。イカ、参考。

フォント設定はともかく、他のテキストエディタみたいにあれこれ細かいカスタマイズをせずにすぐ使えるのも魅力だとは思います。

Atom

最近人気のあるテキストエディタ。パッケージをインストールしてカスタマイズしていくタイプ。

Github謹製ということで、標準でGFM対応のプレビューがついてくるのが嬉しいところ。プレビューはCtrl+Shift+Mで左右分割して出せます。

  • 良いところ
    • PHP Markdown Extraの脚注に対応。
    • エディタ内でもコードブロックのシンタックスハイライトが効いて見やすい。
    • HTML出力が可能（スタイル付き）。
    • パッケージ拡張ができる。
      • エディタのスクロールをプレビューに同期できる（markdown-scroll-sync）。
      • Markdownのフォーマットができる（markdown-format、tidy-markdownなど）。
        • markdown-formatは見出しレベル1～2を強制的に下線表記に置き換えるのが気に食わない。
        • その点では、tidy-markdownが余計なことせず良い感じ。
        • どちらもテーブルの整形が嬉しい。
  • 悪いところ
    • Windowsの64bit版は配布されてない？
    • エディタとプレビューのスクロール同期がずれるし、滑らかにスクロールしないのがちょっと気持ち悪い。
    • たまにエディタとプレビューのスクロール同期が機能しない（条件不明）。
    • TOCに対応していない。
      • markdown-tocを導入しても、[TOC]のような簡易表記はできず、その時点での目次リストを表記するようなMarkdownを生成する。下線表記の見出しレベル1～2にも対応してないっぽい。
    • コードブロックでC#の言語名は「cs」（GFM的にはcsharpのエイリアス）に対応しているが、「csharp」には対応していない。

Ctrl+Shift+Mするのすら面倒に思っちゃダメですかね。良い感じなんですが、TOCの簡易表記対応が欲しいなぁ。

イカ、参考。

上のAtom素晴らしい！って言ってる人も結局、Haroopadに乗り換えてたりします。

Sublime Text 3

定番のテキストエディタ。バージョン3はいつまでβ版なんでしょうね。余計なものが入ってないシンプルなUIが素敵だと思ってます。

こちらもパッケージを追加してどんどんカスタマイズしていくタイプですが、パッケージ管理の仕組みから入れないといけないので最初ちょっと面倒ですね。デフォルトでMarkdownのシンタックスハイライトなど対応していないので、パッケージを追加する必要があります。

選択肢は複数あるのですが、リアルタイムプレビューとしてはOmniMarkupPreviewが使いやすいかなと思います。エディタ側のシンタックスハイライトには、Monokai Extended（MonokaiカラースキームにMarkdownを対応させたもの）とMarkdown Extended（Markdown中のコードブロックをシンタックスハイライト）を使うのが素直な表示になる感じです。

プレビューウィンドウを持つことができないので、OmniMarkupPreviewではローカルサーバを立ち上げて、そこにブラウザでアクセスすることでプレビューを行うという変わった形になります。ちゃんとリアルタイムプレビューできます。プレビューの起動はCtrl+Alt+Oです。

  • 良いところ
    • 64bit対応。
    • PHP Markdown Extraの脚注に対応。
    • エディタ内でもコードブロックのシンタックスハイライトが効いて見やすい。
    • 設定すれば、TOC（目次）に対応する。[TOC]と書くだけでいい。
    • Ctrl+Alt+XでHTML出力が可能（スタイル付き）。
    • テーブルの整形ができる（Table Editorを導入する）。
    • 末尾の空白文字を強調表示できる（TrailingSpacesを導入する）。
  • 悪いところ
    • Sublime Text内でMarkdownプレビューができない。
    • ブラウザでプレビューする都合上、エディタとプレビューのスクロール同期ができない。
    • URLの自動リンク化をしてくれない。

OmniMarkupPreviewはPythonのMarkdownというパッケージを内部で利用していて、設定でPython Markdownの拡張（extensions）を有効にできます。ここで nl2br を有効にしないと単独の改行が反映されません。TOCもここで有効にします。利用できる拡張は公式ドキュメントを参照。

Sublime Text自体はすごく使いやすいエディタなので、プレビューをブラウザに任せないといけない点を除けばかなり良い感じです。

あとMarkdown Extendedでコードのシンタックスハイライトをするとき、言語名にエイリアス使えないかもしれないです。というのも、C#コードのシンタックスハイライトが「cs」では有効にならず、「csharp」と書いたら認識されたからです。しかし、HaroopadやAtomが「cs」を認識して、「csharp」を認識しない罠。

イカ、参考。

Brackets

これも最近人気のあるテキストエディタ。Adobe製で、Edge Codeに置き換わるものなので、Web系に特化しています。

拡張機能Markdown Previewを導入すれば、Markdownアイコンが追加されます。アイコンをクリックすれば上下に画面分割して下画面でプレビューができます。プレビューの歯車アイコンからフォーマットをGFMに変更すれば、テーブルなどGFMの機能が有効になります。

  • 良いところ
    • エディタのスクロールをプレビューに同期できる。
    • PHP Markdown Extraの脚注に対応。
  • 悪いところ
    • Windowsの64bit版は配布されてない？
    • エディタとプレビューのスクロール同期がずれる。
    • エディタとプレビューの左右分割ができない。
    • コードブロックのシンタックスハイライトが効かない。
    • HTML出力できない（多分）。
    • TOCに対応していない。

まあまあ良い感じですが、コードブロックのシンタックスハイライトが効かなかったり、限界がある感じします。

イカ、参考。

Visual Studio Code

Atomに似た感じのMicrosoft製エディタ。設定をJSONで書くあたりはSublime Textっぽい感じも。

Markdownに対応していて、Split Editorで画面を左右2分割にして、右上のアイコンからOpen Previewすれば、エディタとプレビューを並べて編集できます。

  • 良いところ
    • PHP Markdown Extraの脚注に対応。
    • エディタ内でもコードブロックのシンタックスハイライトが効いて見やすい。
  • 悪いところ
    • Windowsの64bit版は配布されてない？
    • 段落内の改行が反映されない（前提に書いた条件を満たさない）。
    • エディタとプレビューのスクロール同期ができない。
    • HTML出力できない（多分）。
    • TOCに対応していない。
    • 分割した画面はそれぞれ独立していて、復数ファイルを編集しようとしたときにまとめて切り替わってくれないのが煩わしい。

できないことが多すぎてちょっと・・・。パッケージを追加して不足分を補えるSublime TextやAtomに比べて明確な優位点がないような。

結論

私はHaroopadを選んでいますが、数々の妥協があります。長文編集したければ、Sublime Text 3を使ったりします。それぞれ良し悪しあるので、そういう使い分けしてもいいんじゃないかと。

自分が使いやすいものを選びましょう。

Previous Post エクストルーパーズ3周年記念対戦会のお知らせ
Next Post RED ASHプロジェクトまとめ