さんざん悩んだマークダウンエディタの最終決定は「Atom」快適に使えるようにする設定と必須のパッケージ 厳選18個

原稿やHTMLの草案を書く際に、とても重宝するのがマークダウンエディタです。特定の記号を付与することにより、文章に構造的な意味を付与し、視認性・再利用性を最大限確保した状態で文章を書くことができます。 マークアップはもとより、ビジネス文章やレポート文章を記述する感覚に近いので、社内の共有文章としてもオススメです。

世の中にはマークダウンで書けるテキストエディタがいっぱい

ライティングとプレビューマークダウンのための78のツール

海外の記事ですが、78ものマークダウンエディタに対応したツールを紹介しています。

78 Tools for Writing and Previewing Markdown

Mac専用、マークダウン対応エディタ35個

Mac専用のマークダウンエディタ集です。

35+ Markdown Apps for the Mac « Mac.AppStorm

これらの中およびそのほか口コミで見つけたものから、自分に合いそうなエディタをいくつか試してみました。

候補だった(試した)マークダウンエディタ

  • MacDown(現役)
  • MWeb
  • Ulysses
  • LightPaper
  • Brackets
  • Atom
  • Sublime Text

Mac Down

macdown.png

MacDownは軽量で「Mou」の後継アプリです。そもそもメインのエディタでしたが、ファイル管理がなくて代替を探していました。でも現役でイイカンジのエディタなので使い続けます。採用。

MacDown: The open source Markdown editor for OS X.

MWeb

mweb.png

Facebookで見かけたマークダウンエディタ。ファイル管理機能があり、画像をドラッグアンドドロップで挿入できるなど、時短にかなり強そうなエディタ。ファイル管理をできるものの、フォルダ管理を「内部プロジェクト」として扱うようで、私はDropbox内に、案件ごとフォルダ管理しているのでこのようなアプリにファイル管理をお任せするようなやり方はあんまり肌に合いません。ということで、こちらは見送り。

MWeb – Pro Markdown writing, note taking and static blog generator App – MWeb

Ulysses

ulysses.png

なんというか、アプリの完成度ではたぶん数あるエディタの中でもトップクラスです。iPhoneやiPadにも対応したアプリもリリースされています。ファイル管理などもできますが、内部パッケージに組み込んで利用する形です。プロジェクトごとにフォルダを切りたい場合は、ちょっと使い勝手が低下します。すごいんですが、融通が効かないため、見送り。

Ulysses

LightPaper

lightpaper.png

LightPaperはシンプルなマークダウンエディタにして、ファイル管理機能がついています。スクラッチノートというメニューバーに常駐する機能があり、これが「メモ機能」としてとても便利です。サッと呼び出してサクッと書けるので、スティッキーズなどの代替にもなります。

画像パスを、マシンのルートやフォルダルートなど、細かく切り替えられるのも便利です。MwebやUlyssesのようなアプリ依存のパッケージ管理ではないため、個別にファイル管理する環境の人にはよさそうなエディタです。執筆に使うマークダウンエディタとしては見送りですが、買ってよかったアプリです。

LightPaper – Probably the best text+markdown editor for your Mac

Brackets

brackets.png

うちの環境では、HTML・CSSのマークアップに標準採用しているエディタです。日本語ローカライズがうれしいところ。そのまま執筆のマークダウンエディタにしたかったのですが、ショートカットのカスタマイズなどが肌に合わず、見送り

Brackets – A modern, open source code editor that understands web design.

Atom

ATOM.png

GitHub製で、いま人気急上昇のエディタ。Sublime Textのような感覚で、自分好みにカスタマイズしていくような作りのアプリです。カスタマイズの仕方はGoogleで検索すれば山ほど出てきますが、ある程度全体像を把握していないと何をやればいいのか迷うかもしれません。いちばん肌に合うエディタで、これを採用!

Atom

Sublime Text

st.png

Web業界では絶大なる人気をあつめたテキストエディタ。有名ですね。こちらも最初は「裸」の状態で、自分好みにカスタマイズしていきます。メニューが英語表記で、取っつきにくいです。(でも日本語にも変更できる)玄人向け。なんだかよくわからないので、見送り。

Sublime Text: The text editor you’ll fall in love with

Atomにした決定打

いろいろと使ってみて、自分の肌に合うポイントは以下です。まさにかゆいところに手が届くといった感じ。

  • ファイル管理ができる
  • キーボードショートカットをカスタマイズ(MacDownと同じにしたい)
  • 画像挿入やリンク挿入もキーボードショートカットで行う
  • プレビュー画面を同時に表示
  • エディタとプレビューを連動スクロール
  • ファイル管理をアプリに任せきらない(UlyssesやMWebみたいなのでなく)
  • 画像パスをマシンルートの絶対パスから始めない(ローカルパス指定でも画像が出る)
  • 日本語化できる

Atomをインストールしたらまずやること

atom.png

「File」メニューから「Install Shell Commands」を選ぶ。これでMacのターミナルから[atom]コマンドと[apm]コマンドが使えるようになります。

Atomに絶対に入れるパッケージ 厳選18個

Atomはインストールしたての状態では、それなりの機能しか備わっていない状態です。自分好みにカスタマイズしてこそ、使う意義があるというもの。マークダウンエディタとして便利に使うための機能拡張。

インストール方法は後述(ひとつひとつ入れるのではなく、まとめて入れる方法がオススメです)。

マークダウン関連

  1. markdown-writer
  2. markdown-preview-plus
  3. markdown-scroll-sync
  4. markdown-pdf

markdown-writer

マークダウンの入力支援。

markdown-preview-plus

マークダウンのリアルタイムプレビュー。ctrl + shift + M

markdown-scroll-sync

エディタ画面とプレビュー画面の連動スクロール。

markdown-pdf

マークダウンファイルからpdfファイル作成。

そのほか、便利にするやつ

  1. japanese-menu
  2. japanese-word-selection
  3. sublime-style-column-selection
  4. multi-cursor
  5. show-ideographic-space
  6. file-icons
  7. autocomplete-paths
  8. color-picker
  9. project-manager
  10. pigments
  11. emmet
  12. atom-html-preview
  13. browser-plus
  14. chary-tree-view

japanese-menu

Atomのメニューや環境設定の言語を日本語にしてくれます。

japanese-word-selection

文章の一部をダブルクリックで「単語や文節」単位で選択してくれます。デフォルトだと全体を選択するので、日本語のエディタっぽい挙動にするのに必要。

sublime-style-column-selection

optionを押しながらドラッグすると矩形選択が可能です。Sublime TextやBracketsのような挙動です。変則的に選択できるので便利です。

multi-cursor

sublime-style-column-selectionの補佐的なパッケージ。Bracketsのような矩形挙動も加わります。option + 矢印キーで、カーソルを増やせます。

show-ideographic-space

全角スペースを□で表示する。

file-icons

サイドバーのアイコンに色をつけるやつ。視認性の向上に。

autocomplete-paths

画像やファイルのパスを補完。

color-picker

色指定の支援。command + shift + C

project-manager

プロジェクト単位で管理するためのパッケージ。あらかじめ登録していたフォルダを一発で呼び出し可能です。command + control +P

pigments

色指定のある部分のコードに対して、実際の色を背景色につけてくれる機能。

emmet

少ないコードでマークアップするために。

atom-html-preview

HTMLとCSSをリアルタイムプレビューするために。ctrl + shift + H

browser-plus

Atom内にWebブラウザ機能を実装するパッケージ。リアルタイムプレビューの機能もついており、HTML作成の際に弁rにです。ctrl + option + O

chary-tree-view package

サイドバーのファイルや画像を、ダブルクリック時に開く挙動にする。

これらを一括インストールする方法

テキストファイルにパッケージ名を記述し、「recommend_packages.txt」としてどこかに保存します。ターミナルを開き、以下のコマンドを実行します。一括インストールにはテーマも含められますので、次の「Atomcasts」も含んでいます。

テキストファイル:recommend_packages

apm install --packages-file recommend_packages.txt

これを行うと「recommend_packages.txt」に書かれたパッケージやテーマを一括でインストールが可能です。便利。

参考:【超おすすめ!!】Atomのパッケージ、テーマ、キーバインディング、設定を紹介してみる(※随時更新) – Qiita

テーマを変更する

これは完全に好みになりますが、編集画面はなんでもよくて、プレビューは白い画面が好きです。ということで、採用したテーマは「Atomcasts」です。

スクリーンショット 2016-03-18 11.08.28.png

GitHub製エディタAtomのテーマを作ってみた – アインシュタインの電話番号

Atomで選択範囲の背景色を見やすく変更する

このテーマのままだとカーソルの選択がまったくもって見えない状態でしたので、選択範囲の色を変更します。 CSSに追加

atom-text-editor {
 .gutter .cursor-line {
 background-color: fade(cyan, 14%);
 }
 .highlights {
 .selection .region {
 background: fade(cyan, 30%);
 }
 .find-result .region {
 border: 1px solid fade(cyan, 80%);
 }
 }
}

参考:Atomで選択範囲の背景色を見やすく変更する – nocorica

Markdown-previewのCSSをきれいにする

2016年3月22日追記
プレビューの見た目をさらによくするために、さらに以下のCSSを追記します。

.markdown-preview {
 @c_border: #666; // border-color
 max-width: 900px;
 margin: 0 auto;
 padding: 25px;
 color: black;
 hr {
 margin: 50px 0;
 background-color: transparent;
 &:after{
 content: "";
 display: block;
 border-top-style: ridge;
 }
 &.pb {
 // <hr class="pb">を入れる事で、
 // プリント時の改ページを指定することができる。
 page-break-after: always;
 &:after {
 display: none;
 }
 }
 }
 a {
 color: #1a0dab!important;
 text-decoration: underline;
 }
 h1, h2, h3, h4, h5 {
 font-weight: normal;
 border-color: @c_border;
 }
 h1 {
 font-size: 35px;
 border: none;
 margin: 30px auto;
 text-align: left;
 }
 h2 {
 font-size: 25px;
 letter-spacing: 3px;
 margin: 50px auto 25px;
 }
 h3 {
 font-size: 18px;
 font-weight: bold;
 margin-bottom: 10px
 }

 // 見出し以外のタグを字下げする
 // ぱっと思いつく、よく使うタグを指定
 p, table, ul, ol, dl, pre, blockquote {
 margin-left: 1em;
 ul, ol, dl {
 margin-left: 0px;
 }
 }
 table {
 border-collapse: collapse;
 border-spacing: 0;
 max-width: 800px;
 th {
 text-align: center;
 background-color: #eee;
 border-color: @c_border;
 }
 tr {
 border-top: #666;
 }
 td {
 border-color: @c_border;
 }
 }
 .margin-clear {
 margin-left: 0;
 }
 // テキストの中央揃え
 .center {
 text-align: center;
 &:extend(.margin-clear);
 }
 // テキストの右寄せ
 .right {
 text-align: right;
 &:extend(.margin-clear);
 }
//マークダウンプレビューの文字色調整
}
atom-text-editor {
 color: #999;
}

参考:AtomエディタのMarkdown PreviewのCSSを実務書類的に調整する | 大石制作ブログ

Atom のマークダウンのキーボードショートカットをカスタマイズ(MacDown風)

# Default Keymaps for Markdown Writer
# https://atom.io/packages/markdown-writer
#
# Wiki: https://github.com/zhuochun/md-writer/wiki/Settings-for-Keymaps
#
".platform-darwin atom-text-editor:not([mini])":
 "shift-cmd-K": "markdown-writer:insert-link"
 "shift-cmd-I": "markdown-writer:insert-image"
 "cmd-i": "markdown-writer:toggle-italic-text"
 "cmd-b": "markdown-writer:toggle-bold-text"
 "cmd-'": "markdown-writer:toggle-code-text"
 "cmd-k": "markdown-writer:toggle-keystroke-text"
 "cmd-h": "markdown-writer:toggle-strikethrough-text"
 'cmd->': "markdown-writer:toggle-blockquote"
 'cmd-"': "markdown-writer:toggle-codeblock-text"
 "cmd-1": "markdown-writer:toggle-h1"
 "cmd-2": "markdown-writer:toggle-h2"
 "cmd-3": "markdown-writer:toggle-h3"
 "cmd-4": "markdown-writer:toggle-h4"
 "cmd-5": "markdown-writer:toggle-h5"
 "shift-cmd-O": "markdown-writer:toggle-ol"
 "shift-cmd-U": "markdown-writer:toggle-ul"
 "cmd-j cmd-p": "markdown-writer:jump-to-previous-heading"
 "cmd-j cmd-n": "markdown-writer:jump-to-next-heading"
 "cmd-j cmd-d": "markdown-writer:jump-to-reference-definition"
 "cmd-j cmd-t": "markdown-writer:jump-to-next-table-cell"

Emmetとキーボードショートカットが衝突する際の対処法

Emmetをインストールすると、マークダウンプレビューのショートカットが衝突するので、マークダウン用のキーボードショートカットに以下の1行を追加。

"ctrl-shift-M": "markdown-preview:toggle"

あとはガンガン使い込みたいと思います。

オススメ書籍

10日でSEO&アクセスアップ Jimdoデザインブック

かっこいいだけではなく、人が集まるホームページを作る!

「Jimdo」(ジンドゥー)でのホームページの作成方法と運用方法を解説した書籍。解説記事を順番に読み進めて行くことで、Jimdoを使ったホームページの作成・運用・宣伝・集客の基本を、10日間で習得するのが本書のコンセプトです。12章構成の解説の中で、Jimdoの基本操作とホームページの作成、デザインとコンテンツ(内容)のレベルアップ、そしてSEOやリスティング広告を含む宣伝・集客の基本を解説しています。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


ABOUTこの記事をかいた人

株式会社マジカルリミックス 代表取締役CEO/JimdoExpert 宮城県出身。コンピューター系の専門学校を卒業後、仙台のデザイン会社に入社。 Webサイトのデザイン・コーディングをはじめとし、各種デジタルメディアのデザインに従事。2002年退職後すぐにマジカルリミックスを創業。2007年に法人化で株式会社マジカルリミックスを設立。Webサイト運用に関するコンサルティング、社内向けITトレーニング、セミナー出演、執筆など。2005年から仙台の専門学校で、非常勤講師としてWeb制作講義を担当。 主な著書に『10日で作るかっこいいホームページ Jimdo(ジンドゥー)デザインブック』(エムディエヌコーポレーション)『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、同)『基礎から覚える、深く理解できる。Webデザインの新しい教科書』(同)。