Atomエディタでマークダウン記法、初期設定とHTML出力

テキストエディタAtomを用いたマークダウン記法に際し、日本語化をはじめ初期設定や、HTML出力の方法をまとめた時のメモです。

WordPressやブログなどウェブサイトに、マークダウン記法でWebライティングをしている人が対象の記事です。

その他テキストエディタからの乗り換え、新たにAtomでマークダウン記法を下書きに検討している方の参考になれば幸いです。

スポンサーリンク

インストール

GitHubが作成しているAtomはWindows、Mac、Linux等のOSに対応しています。

公式サイトから無料でダウンロード可能です。
https://atom.io/


インストールウィザード通りにやれば、簡単にインストールできると思います。

マークダウン記法に必要なパッケージ(拡張機能)

Atomはデフォルトでマークダウン記法に対応していますが、便利なパッケージ(拡張機能)をインストールします。

パッケージのインストール方法
Atomを起動後、File▷Settings▷+Install▷+Install Packagesでウィンドウが開きます。

設定(Settings)までは、Ctrl + ,でもOKです。

Search packages欄で任意のパッケージを検索した後、Installをクリックします。

パッケージは様々な種類があるので、本記事で取り上げたもので無くても大丈夫だと思いますが、わたしは以下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-preview-enhanced
by shd101wyy
https://github.com/shd101wyy/markdown-preview-enhanced

Atomデフォルトのプレビュー画面では、テキストエディタ本文とプレビュー画面のスクロールが連動していないので、本拡張機能を入れておきます。

プレビュー画面の表示方法
Ctrl + Shift + M


他にもプレビュー画面のスクロール連動化パッケージはありますが、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文字目に縦線が表示されています。

プログラミングをする際には、ガイド約として縦線が役立つのかもしれませんが、マークダウン記法には不要なので非表示にします。

エディタ本文の縦線を非表示にする
ファイル▷設定(或いはCtrl + ,)▷パッケージ▷コアパッケージ▷wrap-guide

wrap-guideを無効にする事で、縦線が表示されなくなります。

文字の下にある赤い点線を消す

spell-check
by atom
https://github.com/atom/spell-check

Atomデフォルトのテキストエディタには、自動スペルチェック機能が有効になっています。

当該機能によりマークダウン記法をしていると、エラーとして文字の下に赤い点線が表示される事があります。こちらもマークダウン記法には不要なので、スペルチェック機能を無効化します。

自動スペルチェック機能を無効化する
ファイル▷設定(或いはCtrl + ,)▷パッケージ▷コアパッケージ▷spell-check

ファイルの拡張子は.mdや.markdown等

Atomはデフォルトでマークダウン記法やプレビュー画面表示及びHTML出力ができ、追加パッケージが無くても機能します。

しかしマークダウン記法を有効にするには、ファイルの拡張子を.mdや.markdown等にする必要があります。

必要に応じてパッケージをインストールした上で、.mdや.markdown等のファイル形式を開く事で、はじめてマークダウン記法ができるようになります。


Atomでファイル名を指定して新規保存する場合、末尾にMarkdownを意味する拡張子を指定します。

「任意のファイル名.md」などのようにファイル形式(.mdや.markdown)まで含めて、ファイル名を入力した上で保存します。

ファイルをダブルクリックして、Atomを起動させる場合

ファイル名を直接編集して種類をMarkdownに変更し、初めて開く拡張子の場合、ファイルを開く方法はその他アプリ↓から、Atomなどのテキストエディタを選択します。


Atomで全てを試した訳ではありませんが、ご参考までにVS Codeでは以下の拡張子を全てMarkdownとして認識しています。

  • *.md
  • *.mkd
  • *.mdwn
  • *.mdown
  • *.markdown
  • *.markdn
  • *.mdtxt
  • *.mdtext
  • *.workbook

単純に短くて分かり易いので、わたしは.mdを使っていますが、お好みでお使い下さい。

必要に応じてパッケージをインストールし、ファイルの拡張子を.mdや.markdown等にした後、テキストエディタでマークダウン記法に則り適当に下書きをして、色付けや太字などの修飾情報が反映されていれば、一通りの初期設定は正しく完了しています。

WordPressへの貼り付け(HTML出力)

Atomを用いて、マークダウン記法で作成した文章を、HTML出力する方法です。

どのエディタでも同じかと思いますが、HTML出力は、テキストエディタ本文からではなく、プレビュー画面でコピーしたものをペーストします。

他にもっと良い方法があるかもしれませんが、わたしは以下手順通りにHTML出力しています。

AtomからWordPressへの貼り付け(HTML出力)

  1. Atomプレビュー画面を表示(Ctrl + Shift + M
  2. プレビュー画面の上で右クリック
  3. Copy as HTMLを選択(Ctrl + C
  4. WordPress下書きに貼り付け(Ctrl + V

メニューバーの表示切替

tool-bar-markdown-writerのインストールにより、.mdや.markdown等のファイルを開くと、マークダウン記法に係るツールバーが表示されるかと思います。

それと同時に、元々あったテキストエディタのメニューバーが消えるので一瞬焦るかもしれませんが、メニューバーはAltキーで表示切替が可能です。

Atomのメニューバーを、常に表示させる方法
(WindowsとLinuxのみ)

ファイル▷設定(或いはCtrl + ,)▷コア設定▷「メニューバーを自動的に隠す」のチェックボタンを外す

なおマークダウン記法に係るツールバーは、テキストエディタのメニューバーにある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等でシェアいただけたらと思います!

テキストのコピーはできません。
タイトルとURLをコピーしました