マークダウン記法に際し、テキストエディタをAtomからVisual Studio Code（VS Code）に乗り換えたので、日本語化をはじめとする初期設定やHTML出力の方法をまとめた時のメモです。
WordPressなどブログやウェブサイトに、マークダウン記法でWebライティングをしている人が対象の記事です。
Atomやその他テキストエディタからの乗り換え、新たにVS Codeでマークダウン記法を下書きに検討している方の参考になれば幸いです。
インストール
Microsoftが作成しているVS CodeはWindows、Mac、Linux等のOSに対応しています。
公式サイトから無料でダウンロード可能です。
https://code.visualstudio.com/download
インストールウィザード通りにやれば、簡単にインストールできると思います。
なおLinuxの場合も公式サイトからのダウンロードをおすすめします。
どうやら公式サイトとSnapで、作り込みが若干異なるのが原因のようで、今後改善されるかもしれませんがSnapからインストールした場合、日本語化が上手く機能しない事があるようです。
Linux Mint 20.1からSnapで試してみたら、確かに日本語化の拡張機能自体はインストールできましたが、その後肝心の言語切替がどうしてもできませんでした。
マークダウン記法に必要な拡張機能
VS Codeでマークダウン記法するには、拡張機能をインストールする必要があります。
最低限、日本語化とマークダウン記法に関するものがあれば事足ります。
VS Codeを起動後、Ctrl + Shift + Xで拡張機能のウィンドウが開きます。
拡張機能の検索（IDで検索すると、一発で表示されます）ができたり、インストール済みの拡張機能がウィンドウに表示され、対象の拡張機能は各種設定が可能です。
拡張機能は様々な種類があるので、本記事で取り上げたもので無くても大丈夫だと思いますが、わたしは以下4つの拡張機能をインストール済みです。
日本語化
Japanese Language Pack for Visual Studio Code
by Microsoft
拡張機能ID: ms-ceintl.vscode-language-pack-ja
マークダウン記法というより、英語でしか使わないという硬派な方以外は、まず日本語化ですね。
日本語化の拡張機能をインストール後は、VS Codeを再起動しましょう。
マークダウン記法
Markdown All in One
by Yu Zhang
拡張機能ID: yzhang.markdown-all-in-one
マークダウン記法を有効化する拡張機能は色々あるので、Markdown All in One以外に試してみると良いと思います。
わたしはライトユーザー（根本的にマークダウン記法自体、シンプル化されていますが）という事もありますが、今のところ特に不満はなく使い続けています。
まだまだ使いこなせていませんが、この拡張機能には様々なショートカットキーがあるので、設定画面から確認してみると、より効率良く下書きができるようになるかもしれません。
プレビュー画面
Markdown Preview Github Styling
by Matt Bierner
拡張機能ID: bierner.markdown-preview-github-styles
VS Codeでダークテーマを設定（後述）し、WordPressやGithub（Atom）のように、白色の背景に黒文字でプレビュー画面を開きたい場合、こちらの拡張機能が必要です。
本拡張機能が無くてもMarkdown All in Oneさえあれば、プレビュー画面を表示する事ができます。
しかし配色テーマに関わらずプレビュー画面の色が、テキストエディタ本文のそれと同色になってしまうので、人によっては見辛いかもしれません。
左画面にダークテーマのテキストエディタ本文、右画面に白色の背景に黒文字で構成されたプレビュー画面は見やすいので、おすすめの組合せです！
Atomだと、本文とプレビューそれぞれの画面を同時にスクロールさせるのに、追加で拡張機能をインストールした覚えがありますが、Markdown All in Oneがあればデフォルトで対応しています。
文字数カウント
CharacterCount
by 8amjp
拡張機能ID: 8amjp.charactercount
マークダウン記法というより、VS Codeと言えば多くのプログラミング言語に対応しているソースコードエディタです。
その為か、デフォルトでは文字数カウント機能がついていないので、Webライティング目的で必要な場合はインストールしておくと便利です。
WordPressに本文を貼り付けて保存すれば、何れにせよ文字数が分かりますが、VS Codeで把握できた方が良いのでインストールしています。
ファイルの拡張子は.mdや.markdown等
Windowsの場合、VS Codeやメモ帳を新規で開くと、新しいテキストドキュメントとして拡張子.txtで保存されます。Macの場合、メモAppは初期状態のままだと.rtfでしょうか。
.txtのファイル形式をVS Codeで開くことは可能ですが、拡張子を.mdや.markdown等にしないとマークダウン記法が有効になりません。
つまり拡張機能をインストールした上で、.mdや.markdown等のファイル形式を開く事で、はじめてマークダウン記法ができるようになります。
補足ですが.rtfのファイル形式は、別途拡張機能をインストールすればVS Codeで開くことが可能です。
拡張子はVS Codeでファイルを保存する際、ファイル名の種類をMarkdown（.mdや.markdown等）にします。ファイル名を直接編集して、 .txtや .rtfなどから .mdや .markdown等に替えても大丈夫です。
なおVS Codeではファイルの種類として、以下の拡張子を全てMarkdownとして認識しています。
単純に短くて分かり易いので、わたしは.mdを使っていますが、お好みでお使い下さい。
- *.md
- *.mkd
- *.mdwn
- *.mdown
- *.markdown
- *.markdn
- *.mdtxt
- *.mdtext
- *.workbook
拡張機能をインストールし、ファイルの拡張子を.mdや.markdown等にした後、テキストエディタでマークダウン記法に則り適当に下書きをして、色付けや太字などの修飾情報が反映されていれば、一通りの初期設定は正しく完了しています。
初期設定というか、Atomに比べればVS Codeの場合、本当にただ拡張機能をさくっとインストールして終わりなので、拍子抜けしてしまう程簡単に済んでしまいます。
WordPressへの貼り付け（HTML出力）
VS Codeを用いて、マークダウン記法で作成した文章を、HTML出力する方法です。
VS CodeやAtom他どのエディタを使用していても同じかと思いますが、HTML出力は、テキストエディタ本文からではなく、プレビュー画面でコピーしたものをペーストします。
他にもっと良い方法があるかもしれませんが、わたしは以下手順通りにHTML出力しています。
因みに上記4.で、本文の冒頭に記事タイトル（# H1）が含まれる場合、5の手順ではタイトル欄（つまり最上部）に貼り付けします。
上記4で、本文の冒頭に記事タイトル（# H1）が含まれない場合、5の手順では（タイトル欄では無くて）本文冒頭に貼り付けします。
# 記事タイトル
本文あいうえお
## 見出し
本文かきくけこ
後者のサンプル文
本文あいうえお
## 見出し
本文かきくけこ
当初テキストエディタを使い始めた際、記事タイトル（# H1）を除いた本文のみコピー＆ペーストしていたのですが、記事タイトル（# H1）と本文を一括でHTML出力できてしまうので大変便利です。
初めて気付いた時は、ちょっと感動しました。
Atomのようなダークテーマにする
Microsoftが作ったVS Codeなだけあって、デフォルトの配色テーマはどこかWindowsっぽいというか、淡泊なところがあります。
完全に好みの問題ですが、VS CodeでもAtomのようなダークテーマの設定ができます。
一番Atomのテーマに近いのは、Monakaiあたりでしょうか。
最後に
VS Codeでマークダウン記法する際の、初期設定とHTML出力についてでした。
最後に、本記事でご案内した拡張機能の一覧を再度載せておきます。
| 拡張機能 | ID |
|---|---|
| 日本語化 | ms-ceintl.vscode-language-pack-ja |
| マークダウン記法 | yzhang.markdown-all-in-one |
| プレビュー画面 | bierner.markdown-preview-github-styles |
| 文字数カウント | 8amjp.charactercount |
拡張機能のインストールに加え、.mdや.markdown等ファイル形式（拡張子）の設定をお忘れなく。
またHTML出力は、テキストエディタ本文からではなく、プレビュー画面をコピーしたものをペーストしましょう。
Atomを使っていた時は、VS Codeで同じことをするのに、より多くの拡張機能をインストールして、更に詳細設定していた気がします。
その点VS Codeだと、拡張機能をインストールしたら、そのまま使えてしまうので初期設定に時間を取られず、より使い勝手が良い印象です。
※本文は以上です。
もし記事を気に入っていただけたら、是非、SNS等でシェアいただけたらと思います！