2015年6月11日木曜日

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の感想

 


1.Atomをインストール

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

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

 


2.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'

 


3.テーマをダーク系に変更

File → Settings → Theme

UI Theme: Atom Dark

Syntax Theme: Base16 Tomorrow Dark

 


4.フォントの変更

参考

エディタ内では等幅(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";
   }
}

 


5.Markdown記法でプレビューしながら編集

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

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

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

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

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

 


6.Atomの感想

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

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

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

image

 

< Related Posts >

コメントを投稿
Related Posts Plugin for WordPress, Blogger...

Blog Archives