GitHub製エディタAtomのMarkdownリアルタイムプレビューの仕様

GitHub製エディタAtomソースコードがMIT Licenseで公開されたので久しぶりに使ってみたところ、以前はできなかったMarkdwonファイルのリアルタイムプレビューができるようになっていました。

ここでは、AtomのMarkdownリアルタイムプレビュー機能の現時点での仕様やその調べ方を簡単にまとめます。

仕様の調べ方

Atomの機能はコア部分を除くとパッケージと呼ばれる取り外し可能なモジュールの集合体となっています。Vimにおけるプラグインのようなものですが、基本的な機能もパッケージとして実装されているのが特徴です。

Markdownのリアルタイムプレビュー機能markdown-previewというパッケージが担当しています。したがって、このパッケージのコードを見ると仕様がわかります。

atom/markdown-preview - GitHub

Markdownリアルタイムプレビューの使い方 [参考]

  1. AtomでMarkdownファイルを開きます。

対応している拡張子は後述します。

  1. Ctrl-MCtrl-Shift-m を実行してプレビューペインを開きます。

  2. Markdownファイルを編集します。(保存の必要なし)

  3. プレビューペインの内容がリアルタイムに更新されます。

Markdownファイルとして扱われる拡張子の一覧

対応拡張子atom/language-gfmgfm.csonに記載されています。

'fileTypes': [
  'markdown'
  'md'
  'mdown'
  'mkd'
  'mkdown'
  'ron'
]

シンタックスハイライトされる言語の一覧

atom/markdown-previewリポジトリextension-helper.coffeeに記載されています。

extensionsByFenceName =
  'bash': 'sh'
  'coffee': 'coffee'
  'coffeescript': 'coffee'
  'coffee-script': 'coffee'
  'css': 'css'
  'go': 'go'
  'html': 'html'
  'java': 'java'
  'javascript': 'js'
  'js': 'js'
  'json': 'json'
  'less': 'less'
  'mustache': 'mustache'
  'objc': 'm'
  'objective-c': 'm'
  'php': 'php'
  'python': 'py'
  'rb': 'rb'
  'ruby': 'rb'
  'sh': 'sh'
  'toml': 'toml'
  'xml': 'xml'
  'yaml': 'yaml'
  'yml': 'yaml'

レンダリング処理の流れ

現在は以下のように流れなっています。

  1. 編集を行うとAtom本体からcontents-modifiedcontents-changedイベントがemitされる
  2. markdown-previewパッケージのmarkdown-preview-view.coffeechangeHandlerがイベント処理を開始
  3. markdown-previewパッケージのrendere.coffeeが以下のgjtorikian/roasterが生成したhtmlをサニタイズするなどして最終的な出力を生成

Redcarpetなど他のレンダラと出力が違って気になる場合などは、上記の該当ライブラリを見ると原因がわかるでしょう。