Windows + Atom EditorでMarkdownをPreviewしながら編集

投稿日：

atom手順書などをMarkdown記法で書くようにしようとしたときの覚書。

環境： Windows 8.1 64bit

Google ChromeやFirefoxのプラグインを調べたけど、結局Atomが一番やりやすい。

ちなみにPhpStormにはMarkdownのプラグインがあるので、Atomに切り替える必要はない。

 

参考

 

目次

  1. Atomをインストール
  2. Emacsのキーバインドに変更
  3. テーマをダーク系に変更
  4. フォントの変更
  5. Markdown記法でプレビューしながら編集
  6. Atomの感想

 

１．Atomをインストール

AtomはGitHubが作ったエディタ。Visual Studio CodeもAtomがベースになっているらしい。

公式ページからダウンロードしてインストール

 

２．Emacsのキーバインドに変更

私はWindowsとEmacsをミックスした変則的なキーバインドなので、とりあえずカーソル移動はEmacsにしたい。

File → Open Your Keymap

参考サイトにあるのをそのまま貼り付け。いろいろカスタマイズした。

# Windows for Any panel
'.platform-win32':
  # cursor
  'ctrl-f':'core:move-right'
  'ctrl-b':'core:move-left'
  'ctrl-n':'core:move-down'
  'ctrl-p':'core:move-up'
  'ctrl-h':'core:backspace'
  'ctrl-g':'core:cancel'

  # Rebind
  'ctrl-shift-f':'find-and-replace:show'
  'ctrl-alt-shift-f':'project-find:show'
  'ctrl-shift-g':'go-to-line:toggle'

  # moving tabs
  'alt-right':'pane:show-next-item'
  'alt-left':'pane:show-previous-item'

# Windows/Editor
'.platform-win32 atom-text-editor':
  # Emacs binds
  'ctrl-e':'editor:move-to-end-of-line'
  'ctrl-a':'editor:move-to-beginning-of-line'
  'ctrl-d':'core:delete'
  'ctrl-o':'editor:newline'
  #'ctrl-/': 'autocomplete:toggle'
  'ctrl-;': 'editor:toggle-line-comments'

# Workspace/Editor
'atom-workspace atom-text-editor':
  'ctrl-shift-a':'core:select-all'
  'ctrl-shift-d':'find-and-replace:select-next'

'atom-workspace atom-text-editor:not([mini])':
  'ctrl-/': 'autocomplete:toggle'

 

３．テーマをダーク系に変更

File → Settings → Theme

UI Theme: Atom Dark

Syntax Theme: Base16 Tomorrow Dark

 

４．フォントの変更

参考

エディタ内では等幅（monospace）フォント。その他はWindowsの「Meiryo UI」にする。Settings → Editor Settings

image

File → Open Your Stylesheet

.tree-view {
  font-family: "Meiryo UI"
}

.markdown-preview {
   font-family: "Meiryo UI";
   h1, h2, h3, h4, h5, h6 {
     font-family: "Meiryo UI";
   }
}

 

５．Markdown記法でプレビューしながら編集

インストール後に右クリックすると「Open with Atom」が表示される。

ファイルを開いて、右下のPlain Textをクリック。

「GitHub Markdown」を選択すると色が変わる。

Packages → Markdown Preview → Toggle Preview (Ctrl + Shift + M)でプレビューされる。

書式に関しては下記などを参考に。

 

６．Atomの感想

動作が重いけど、しっかり設定すれば使いやすくなりそうな予感がした。

xyzzy + PhpStormから抜け出せそうにない。

これはxyzzyでnodejs開発をしている様子。ツリー表示や英和・和英辞書は他でもできるけど、バッファ＋フレームの考え方が便利で離れられない。

image

 

< Related Posts >