Atom をマークダウンエディタとして使う

VS Code の MarkdownPreview が、開いていた右ペインのファイルを閉じてしまったり、相変わらず日本語変換が入力している文字に重なって使いづらいので.md ファイルだけ Atom で編集できるように設定しました。

主に Atom を Markdown エディタとして整備 - Qiita 感じなノリですが、そこまでパッケージ入れなくても自分仕様にできたのでそのメモです。

Editor エディター設定

Font Family: Source Han Code JP
Line Height: 1.6
Show Invisibles: on （半角スペースを可視化）
Now Word Characters: ./\\()\"':,.;<>~!@#%^&*|+=[]{}`~? （クリックできる区切り文字）

Package パッケージ

markdown-preview

これはデフォルトで入っています。
ctrl + shift + M のショートカットで右ペインにプレビュー開始。
Use Github.com style: on で Github の.mdプレビュー風スタイルになる。

markdown-scroll-sync

マークダウンプレビューのスクロール位置同期

prettier-atom

コード整形
Format Files on Save: on で ファイル保存時に整形が動作する

show-ideographic-space

全角スペースを可視化

Themes テーマ

Atom は UI テーマとエディタとで分かれるらしい
分かりづらかったのですが、Theme > Install > 検索窓の右のタブを Themes に切り替えてインストールする必要があります。

UI Theme: One Dark
Syntax Theme: Spacegray Atom Dark

styles.less 独自 CSS

テーマに上書きする形で CSS の調整を行える。
半角スペースを可視化したものの見えにくかったので、Theme > your stylesheet をクリックして下記を追記
参考：Atom のスペースをはっきり見えるようにする - Qiita

// 半角スペースを見やすくする
@invisible-color: rgba(255, 255, 255, 0.3);
atom-text-editor.editor {
  .indent-guide {
    color: @invisible-color;
  }
  .invisible-character {
    color: @invisible-color;
  }
}

Keybindings ショートカット

タブ移動が Sublime の慣れで順番通りが良いので、keymap.cson に下記を追記。
参考：Atom 1.7 からタブ切り替えが使いづらくてイライラするので従来式に戻す - Qiita

'body':
  'ctrl-tab ^ctrl': 'unset!'
  'ctrl-tab': 'pane:show-next-item'
  'ctrl-shift-tab ^ctrl': 'unset!'
  'ctrl-shift-tab': 'pane:show-previous-item'