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

マークダウン記法に際し、テキストエディタを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さえあれば、プレビュー画面を表示する事ができます。

しかし配色テーマに関わらずプレビュー画面の色が、テキストエディタ本文のそれと同色になってしまうので、人によっては見辛いかもしれません。

プレビュー画面の表示方法
本文の横に、プレビューを表示(2画面)するには、Ctrl + K V

全画面プレビュー表示は、Ctrl + Shift + V


左画面にダークテーマのテキストエディタ本文、右画面に白色の背景に黒文字で構成されたプレビュー画面は見やすいので、おすすめの組合せです!


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に変更し、初めて開く拡張子の場合、ファイルを開く方法はその他アプリ↓から、VS Codeなどのテキストエディタ選択します。


なお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出力しています。

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

  1. VS Codeプレビュー画面を表示(Ctrl + K V
  2. カーソルをプレビュー画面内のどこかに移動した上でクリック
  3. プレビュー画面内の本文を全て選択(Ctrl + A
  4. 選択した本文をコピー(Ctrl + C
  5. WordPressの下書きに貼り付け(Ctrl + V


因みに上記4.で、本文の冒頭に記事タイトル(# H1)が含まれる場合、5の手順ではタイトル欄(つまり最上部)に貼り付けします。

上記4で、本文の冒頭に記事タイトル(# H1)が含まれない場合、5の手順では(タイトル欄では無くて)本文冒頭に貼り付けします。

前者のサンプル文
# 記事タイトル
本文あいうえお

## 見出し
本文かきくけこ

後者のサンプル文
本文あいうえお

## 見出し
本文かきくけこ


当初テキストエディタを使い始めた際、記事タイトル(# H1)を除いた本文のみコピー&ペーストしていたのですが、記事タイトル(# H1)と本文を一括でHTML出力できてしまうので大変便利です。

初めて気付いた時は、ちょっと感動しました。

Atomのようなダークテーマにする

Microsoftが作ったVS Codeなだけあって、デフォルトの配色テーマはどこかWindowsっぽいというか、淡泊なところがあります。

完全に好みの問題ですが、VS CodeでもAtomのようなダークテーマの設定ができます。

VS Codeのテーマ設定方法

ファイル▷ユーザー設定▷配色テーマ
或いは、Ctrl + K Ctrl + T


一番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等でシェアいただけたらと思います!

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