テキストエディタAtomを用いたマークダウン記法に際し、日本語化をはじめ初期設定や、HTML出力の方法をまとめた時のメモです。
WordPressやブログなどウェブサイトに、マークダウン記法でWebライティングをしている人が対象の記事です。
その他テキストエディタからの乗り換え、新たにAtomでマークダウン記法を下書きに検討している方の参考になれば幸いです。
インストール
GitHubが作成しているAtomはWindows、Mac、Linux等のOSに対応しています。
公式サイトから無料でダウンロード可能です。
https://atom.io/
インストールウィザード通りにやれば、簡単にインストールできると思います。
マークダウン記法に必要なパッケージ（拡張機能）
Atomはデフォルトでマークダウン記法に対応していますが、便利なパッケージ（拡張機能）をインストールします。
パッケージは様々な種類があるので、本記事で取り上げたもので無くても大丈夫だと思いますが、わたしは以下6つのパッケージをインストール済み、また2つのパッケージを無効化しています。
日本語化
japanese-menu
by syon
https://github.com/syon/atom-japanese-menu
公式説明文の通り、Atomのメニューバーとコンテキストメニュー、設定画面を日本語化します。
マイクロソフト製のVisual Studio Code（VS Code）と異なり、日本語パッケージをインストールするとAtomは再起動の必要が無く、すぐに反映されます。
マークダウン記法
tool-bar-markdown-writer
by zhouchun
https://github.com/zhuochun/tool-bar-md-writer
Atomはデフォルトでマークダウン記法に対応していますが（プレビュー画面の表示も可能）、上記パッケージをインストールする事により、ツール（メニュー）バーが表示されます。
Syntaxと呼ばれるマークダウン記法のショートカット（文法みたいなもの）を覚えていなくても、このツールバーを駆使する事で、Microsoftワードみたいな感覚で容易に、テキストエディタで下書をする事ができます。
tool-bar-markdown-writerをインストール時、”Install dependency?”とのポップアップが2回出てくるので、都度Yesをクリックします。それにより依存関係にある以下パッケージが追加でインストールされます。
markdown-writer
by zhouchun
https://github.com/zhuochun/md-writer
tool-bar
by Suda
https://github.com/suda/tool-bar
プレビュー画面のスクロール連動と目次
markdown-preview-enhanced
by shd101wyy
https://github.com/shd101wyy/markdown-preview-enhanced
Atomデフォルトのプレビュー画面では、テキストエディタ本文とプレビュー画面のスクロールが連動していないので、本拡張機能を入れておきます。
他にもプレビュー画面のスクロール連動化パッケージはありますが、markdown-preview-enhancedは目次の表示も可能なのが地味にポイントです。
文字数カウント
wordcount
by OleMchls
https://github.com/OleMchls/atom-wordcount
マークダウン記法というより、Atomと言えば多くのプログラミング言語に対応しているソースコードエディタです。
その為か、デフォルトでは文字数カウント機能がついていないので、Webライティング目的で必要な場合はインストールしておくと便利です。
インストールすると、エディタ下部のステータスバーに「250 W | 2000 C」というような表示がされます。
数字は適当ですが、上記の例だと2,000文字という意味です。 Wはword（単語）、Cはcharacter（文字数）です。
wordは不要（そもそも日本語に対応しているのか不明）なので、設定から”Show word count”のチェックを外してしまっても良いと思います。
エディタ本文の縦線を消す
wrap-guide
by atom
https://github.com/atom/wrap-guide
Atomデフォルトのテキストエディタ本文には、80文字目に縦線が表示されています。
プログラミングをする際には、ガイド約として縦線が役立つのかもしれませんが、マークダウン記法には不要なので非表示にします。
文字の下にある赤い点線を消す
spell-check
by atom
https://github.com/atom/spell-check
Atomデフォルトのテキストエディタには、自動スペルチェック機能が有効になっています。
当該機能によりマークダウン記法をしていると、エラーとして文字の下に赤い点線が表示される事があります。こちらもマークダウン記法には不要なので、スペルチェック機能を無効化します。
ファイルの拡張子は.mdや.markdown等
Atomはデフォルトでマークダウン記法やプレビュー画面表示及びHTML出力ができ、追加パッケージが無くても機能します。
しかしマークダウン記法を有効にするには、ファイルの拡張子を.mdや.markdown等にする必要があります。
必要に応じてパッケージをインストールした上で、.mdや.markdown等のファイル形式を開く事で、はじめてマークダウン記法ができるようになります。
Atomでファイル名を指定して新規保存する場合、末尾にMarkdownを意味する拡張子を指定します。
「任意のファイル名.md」などのようにファイル形式（.mdや.markdown）まで含めて、ファイル名を入力した上で保存します。
Atomで全てを試した訳ではありませんが、ご参考までにVS Codeでは以下の拡張子を全てMarkdownとして認識しています。
- *.md
- *.mkd
- *.mdwn
- *.mdown
- *.markdown
- *.markdn
- *.mdtxt
- *.mdtext
- *.workbook
単純に短くて分かり易いので、わたしは.mdを使っていますが、お好みでお使い下さい。
必要に応じてパッケージをインストールし、ファイルの拡張子を.mdや.markdown等にした後、テキストエディタでマークダウン記法に則り適当に下書きをして、色付けや太字などの修飾情報が反映されていれば、一通りの初期設定は正しく完了しています。
WordPressへの貼り付け（HTML出力）
Atomを用いて、マークダウン記法で作成した文章を、HTML出力する方法です。
どのエディタでも同じかと思いますが、HTML出力は、テキストエディタ本文からではなく、プレビュー画面でコピーしたものをペーストします。
他にもっと良い方法があるかもしれませんが、わたしは以下手順通りにHTML出力しています。
メニューバーの表示切替
tool-bar-markdown-writerのインストールにより、.mdや.markdown等のファイルを開くと、マークダウン記法に係るツールバーが表示されるかと思います。
それと同時に、元々あったテキストエディタのメニューバーが消えるので一瞬焦るかもしれませんが、メニューバーはAltキーで表示切替が可能です。
なおマークダウン記法に係るツールバーは、テキストエディタのメニューバーにあるView▷Toggle Tool Barで表示切替が可能です。
より広い下書きの編集スペースを確保したい場合は、メニューバーやツールバーを非表示にしておくと良さそうです。
最後に
Atomでマークダウン記法する際の、初期設定とHTML出力についてでした。
最後に、本記事でご案内したパッケージ（拡張機能）の一覧を再度載せておきます。青色マーカーの機能は、必要に応じて無効化すると良いと思います。
| 機能 | パッケージ名 |
|---|---|
| 日本語化 | japanese-menu |
| マークダウン記法 | tool-bar-markdown-writer* |
| プレビュー画面と目次 | markdown-preview-enhanced |
| 文字数カウント | wordcount |
| 縦線の非表示 | wrap-guide |
| スペルチェックの無効化 | spell-check |
tool-bar-markdown-writer*と依存関係にある、markdown-writerとtool-barもインストールしておきます。
パッケージのインストールに加え、.mdや.markdownなど拡張子（ファイル形式）の設定をお忘れなく。
またHTML出力は、テキストエディタ本文からではなく、プレビュー画面をコピーしたものをペーストしましょう。
Atom各パッケージのインストール画面には、ダウンロード数が表示されているので合わせてご参照下さい。
※本文は以上です。
もし記事を気に入っていただけたら、是非、SNS等でシェアいただけたらと思います！