Atom をMarkdownエディタとして整備

Sublime Text を乗り越えるべく開発された、後発の Atom エディタ。今のところMarkdownのエディタとして使ってみただけですが、だいたいSublime Textと同じような、でもちょっぴり使用感が洗練されている感じかな。

|      | Sublime Text 3 |    Atom    |
|:-----------------|------------------|------------------|
価格  |  $70 per user<br/>評価は無料無期限<br/>しばしば購入を催促される  |  完全無料
日本語入力環境  | markdownの編集に便利に<br>使おうとするとキーバインディングの<br>カスタマイズが必要   |  目下余り問題なく日本語入力可能<br>今後問題が見つかるかも...
言語別設定  | 対応   | 部分的対応<br/>フォントは未対応だが[裏技あり](http://qiita.com/kouichi-c-nakamura/items/5b04fb1a127aac8ba3b0#github-markdown-%E5%B0%82%E7%94%A8%E3%81%AB%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E6%8C%87%E5%AE%9A)
スペルチェック  |  設定ファイルを編集して有効化  | 初めからインストールされているが[マークダウンで利用するには有効化が必要](http://qiita.com/kouichi-c-nakamura/items/a57521159eb34492dbe4#%E7%89%B9%E5%AE%9A%E3%81%AE%E8%A8%80%E8%AA%9E%E3%81%A7spell-check%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF)<br/>特に[Windows 7についてはこちらを参考に](http://qiita.com/kouichi-c-nakamura/items/a57521159eb34492dbe4)
markdown用ツールバー | 無し | Packageで追加可能
markdownのPreview | Packageで追加可能<br>ブラウザでの表示 | 内蔵<br>左右分割表示
Packageのインストール | まず手動で Package Control を<br>インストールする必要あり | 内蔵

どちらも、マルチプラットフォームに対応で、共に日本語入力に対応しているものの、Windowsではフォントの表示やその他が非常にお粗末である（OSのせいでしょう）のに対し、Macで使うととても美しいレンダリングで超快適、というところも同じ。日本語を使わなければWindowsでもとても快適です。

コミュニティが作るPackageをインストールすることで機能拡張するという設計思想もまったく同じ。ただし、そのPackageのインストールが Atomのほうが初めから簡単にできるような親切設計になっています。

結論から言えば使い心地はAtomのほうがよいです。

参考
[Sublime Text 3をMarkdownエディタとして整備](http://qiita.com/kouichi-c-nakamura/items/e2aa565ac4571d1a5ff5)

# Packages

Packageのインストールは非常に簡単。執筆時点で[6,066種類のPackages](https://atom.io/packages)が利用可能。

1. `Preferences... > + Install`
2. 空欄に Package名の一部を入力して検索し、Installボタンを押すだけ。
3. インストール済みのPackagesは`Preferences... > Packages`から確認できる
    1. 同様に空欄に名前を入れることで絞込が可能
    2. 各PackageのSettings をクリックすると、個別の設定画面が開く

### markdown-preview

初めから同梱されています。左右分割表示でhtmlとしての表示結果を確認できます。markdown編集中にリアルタイムで変更が反映されます。

1. markdownファイルを編集する
  2. 新しいファイルの場合は、画面右下の`Plain Text`をクリックし、 <img width="505" alt="Screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/109898/bf6510b9-f45a-bf29-453f-918ea9eb7901.png">

  3. 空欄にmarkと入力して**GitHub Markdown** を絞り込んで選択。<img width="497" alt="Screenshot2.png" src="https://qiita-image-store.s3.amazonaws.com/0/109898/953bc3f1-0ac2-2042-14ad-ab413c96b977.png">

1. `Packages > Markdown Preview > Toggle Preview`でプレビューが表示される
2. markdown-scroll-syncも是非インストールしてみてください

![68747470733a2f2f636c6f75642e67697468756275736572636f6e74656e742e636f6d2f6173736574732f3337383032332f31303031333038362f32346361643233652d363134392d313165352d393065362d3636333030393231303231382e706e67.png](https://qiita-image-store.s3.amazonaws.com/0/109898/2e0d4186-539c-d748-7464-89fbfde65cd3.png)


### [markdown-writer](https://atom.io/packages/markdown-writer)

定番。キーバインディングの有効化は、

1. `Packages > Markdown Writer > Configurations > Create Default Keymaps`
2. `keymap.cson`が開き、一番下に、markdown用のキーバインディングが追加される
3. `Packages > Markdown Writer > Open Cheat Sheet`でmarkdownの記法と共にキーバインディングを確認できる

### [markdown-scroll-sync](https://atom.io/packages/markdown-scroll-sync)

定番。編集画面とプレビュー画面のスクロールを同期させる。

![68747470733a2f2f636c6f75642e67697468756275736572636f6e74656e742e636f6d2f6173736574732f3831313435352f31313331373235392f63356239623063322d386664632d313165352d386638352d6237646565666235323563352e676966.gif](https://qiita-image-store.s3.amazonaws.com/0/109898/eb50718f-5d83-1a3e-061e-65dc283c239a.gif)


### [tool-bar-markdown-writer](https://atom.io/packages/tool-bar-markdown-writer)

定番。便利なツールバーを表示してくれる。markdown-writerとtool-barが必須。

<img width="1094" alt="687474703a2f2f692e696d6775722e636f6d2f474b357a42314c2e706e67.png" src="https://qiita-image-store.s3.amazonaws.com/0/109898/e5226ae2-6fe8-f50d-9cb1-6eb53e855c63.png">

1. markdown-writerをインストール
2. tool-barをインストール
3. tool-bar-markdown-writerをインストール

### [tool-bar](https://atom.io/packages/tool-bar)

tool-bar-markdown-writerの使用に必要となる。

### [wordcount](https://atom.io/packages/wordcount)

定番。文字数を数えるため。

### [markdown-toc](https://atom.io/packages/markdown-toc)

markdown文書の階層構造を元に Table of Contents 目次のhtmlを作って追加します。

### [atom-beautify](https://atom.io/packages/atom-beautify)

自動的にインデントを整形してくれるもの。markdownにも対応。


# おまけのPackage

### [markdown-mindmap](https://atom.io/packages/markdown-mindmap)

markdown文書を元にマインドマップを作ってしまうという試み。作るの大変だったんじゃないでしょうか。本家 iMindMapが同様の機能を実装してくれるといいなあと思います。

![68747470733a2f2f6769746875622e636f6d2f64756e64616c656b2f61746f6d2d6d61726b646f776e2d6d696e646d61702f626c6f622f6d61737465722f73637265656e73686f742e6769663f7261773d74727565.gif](https://qiita-image-store.s3.amazonaws.com/0/109898/08fa025d-1a4e-55f0-2a66-244b538c88d9.gif)



### [activate-power-mode](https://atom.io/packages/activate-power-mode)

見たまんまですね。ドカンドカンとタイピングしたい人のためのPackage。

![68747470733a2f2f636c6f75642e67697468756275736572636f6e74656e742e636f6d2f6173736574732f3638383431352f31313631353536352f31306631363435362d396336352d313165352d386166342d3236356630316663383361302e676966.gif](https://qiita-image-store.s3.amazonaws.com/0/109898/7b222d39-8046-9ea8-9f30-23456a968843.gif)

### [minimap](https://atom.io/packages/minimap) 

Sublime Text のようなminimap

![68747470733a2f2f6769746875622e636f6d2f61746f6d2d6d696e696d61702f6d696e696d61702f626c6f622f6d61737465722f7265736f75726365732f73637265656e73686f742e706e673f7261773d74727565.png](https://qiita-image-store.s3.amazonaws.com/0/109898/7535c0ff-4719-4c9d-6818-da434ac3d89b.png)


### [git-time-machine](https://atom.io/packages/git-time-machine)

Gitのcommit 履歴を美しくナヴィゲートさせてくれるPackage。

![68747470733a2f2f7261772e67697468756275736572636f6e74656e742e636f6d2f6c6974746c656265652f6769742d74696d652d6d616368696e652f6d61737465722f7265736f75726365732f74696d656d616368696e652e676966.gif](https://qiita-image-store.s3.amazonaws.com/0/109898/6cb0cb81-7d33-4a38-2dae-b72163ba3021.gif)



# Markdown 専用にフォントを指定

通常のエディタとしては等幅フォントが基本だが、**markdownの編集に限っては美しいプロポーショナルフォントが使いたい**もの。しかし、Preferences...からフォント指定すると、すべてのプログラム言語に対して影響してしまい不便です。

しかし、実は比較的簡単に markdown 専用のフォント指定を行うことが出来る。元の情報は[こちら](https://github.com/atom/language-gfm/issues/69#issuecomment-69736262)。その後、[Atom 1.13で大幅な文法の仕様変更](http://flight-manual.atom.io/shadow-dom/sections/removing-shadow-dom-styles/)があり、`::shadow`が使われなくなりました。

1. メニューから`Atom > Stylesheet...`を選ぶと、`styles.less`ファイルが開く。
2. 下記のコードを一番下に貼り付ける（フォント名はご自由に）

```scss
// language-gfm
atom-text-editor[data-grammar="source gfm"].editor {
    font-family: "Merriweather",serif;
}
```

もしデフォルトのGitHub Markdown (language-gfm) の代わりに [language-markdown](https://atom.io/packages/language-markdown)を使っている場合は以下の通り。

```scss
// language-markdown
atom-text-editor[data-grammar="text md"].editor{
    font-family: "Merriweather",serif;
}
```

フォント指定が反映されました。

<img width="356" alt="Screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/109898/77a8672e-3d48-c89b-04ec-f63d34e5e7e4.png">



# 数式を表示させたい

[こちらの記事](http://qiita.com/noppefoxwolf/items/335323b98f0400a6f07d)と[こちらの記事](http://skygiant.com.au/markdown-math-in-atom/)が参考になります。以下は最低限機能する一つの例ですが、他に便利な設定があるかもしれません。

### [markdown-preview-plus](https://atom.io/packages/markdown-preview-plus)

1. インストール後、`Settings > Packages > Markdown Preview Plus > Settings` "Enable Math Rendering By Default"にチェックする

    ![Image 002.png](https://qiita-image-store.s3.amazonaws.com/0/109898/bd6fdec0-fe84-7964-bd5a-86fad5d5567d.png)

2. 内臓のMarkdown Preview をDisableする
3. Markdown Preview Plusをtoggleして、編集中のマークダウンのプレビューを表示する `Ctrl + Shift + M`
4. [LaTex]((http://www.latex-cmd.com/index.html#equation))で書いた数式がレンダリング表示されます。 

```markdown 
文章の中に $\Delta{y}$ のように数式も入れられます。

$$W = I \bullet V$$
```

![Image 003.png](https://qiita-image-store.s3.amazonaws.com/0/109898/76970c9c-08fe-421e-d1bb-c241ce1e87d1.png)

# スペルチェックについて

[こちらの記事](http://qiita.com/kouichi-c-nakamura/items/a57521159eb34492dbe4)を参照下さい。特にWindows 7では注意が必要なようです。

# Markdown Previewのプレビュー画面のスタイルをカスタマイズするには？

上記、「Markdown 専用にフォントを指定」と同じ方法で、markdown編集画面のCSSスタイルを編集できますが、Markdown Previewのプレビュー画面（右側に表示される画面）のスタイルをカスタマイズするにはどうしたらよいでしょうか？

同様に Atom > Stylesheet... から、`styles.less`を開いて編集し、`markdown-preview`クラスに対してCSSスタイルを指定すればよいです。

注意点としては、markdown-previewの環境設定画面（Preferences... > Settings タブ > Packages タブ > 検索窓に markdownと入力 > Core Packages の下に `markdown-preview` > Settingsボタン ）で`Use GitHub.com style`にチェックを入れるかどうかで、以下のように指定方法が変わります。

<img width="416" alt="Screenshot2.png" src="https://qiita-image-store.s3.amazonaws.com/0/109898/8e5f4b27-77dd-7ad2-6175-363405013837.png">


```scss
// markdown-preview
.markdown-preview:not([data-use-github-style]) {
  h1 {
    color: red;
  }
}

// markdown-preview: Use GitHub.com style
.markdown-preview {
  h1 {
    color: green;
  }
}
```
View > Developer > Toggle Developer Tools （Macでは `⌥` + `⌘` + `I`）で、Chromeと同じ形式のディベロッパーツールが表示されます。ツールの左上にある <img width="30" alt="Screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/109898/9fc5e76b-307e-222c-3284-b4d2f6d92801.png">ボタンをクリックすると、ポインタをかざした部分の要素が表示されるので、この情報を元に CSS スタイルを指定していきます。

参考リンク

+ [AtomエディタのMarkdown PreviewのCSSを実務書類的に調整する](http://blog.s0014.com/posts/2015-10-16-mk/)
+ [AtomでカッコよくMarkdown PreviewするためのCSS](http://tanksuzuki.com/post/atom-markdown-style/)
+ [AtomのMarkdownプレビューをGitHubスタイルにしたり、カスタマイズしたりする。]
(http://qiita.com/naru0504/items/bcfbd936dff3d3c15df2)