カラーユニバーサルデザインに配慮しています

【Visual studio code】をマークダウンで使う簡単な設定とおすすめ拡張機能

読了時間: 約3

Visual studio codeのインストール

「Visual studio code」は多機能でしかも使いやすいので、開発者(プログラマー)が好んで使いますが、それゆえ初心者が使うには敷居が高く感じられるソフトです。

しかしブログを書くのにマークダウンで特化して使うのもありですね。インストールしてもそのままでは使いにくいので、「Google Chrome」の様に拡張機能を追加して使いやすくしていくことが大切です。

Visual Studio Codeはソースコードエディタである。マイクロソフトにより開発され、Windows、Linux、macOS上で動作する。デバッグ、Gitクライアントの統合、シンタックスハイライト、インテリセンス、スニペット、リファクタリングなどの機能を持つ。カスタマイズもでき、利用者はエディタのテーマやキーボードショートカット等を変更できる。

引用:Visual Studio Code – Wikipedia

黄色のアンダーライン部分が少し分かりにくい説明ですが、気にせずまいりましょう。インストールはこちらからどうぞ

参考サイト
12436288584_94d6bc46d2_b.jpg
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform – Linux, macOS, and Windows.…
Visual Studio Codeのインストール
Download for Macをクリック

画像ではMacですが、Windows・Linuxの方は横のをクリックして選択して下さい。

メニューの日本語化

インストールした状態ではメニューが英語表記です。先ずはメニューを日本語化しましょう。手順を説明します。

「Japanese Language Pack for Visual Studio Code」のインストール

日本語化
手順
  1. 左下のアイコンをクリックします。これが拡張機能用のアイコンです
  2. 検索窓です。検索したいワードを記入します(英語でjapanese)
  3. Japanese Language Pack for Visual Studio Codeを選択

  4. インストールボタンをクリックします

これでメニューが日本語化されました。

ファイルの新規作成と保存

Macでの説明になります。(Windowsの場合は⌘➡️Ctrlに置き換えてください)

メニューバーから「ファイル➡️新規ファイル」もしくはショートカットキーで +Nを選択。ステータスバーのプレーンテキストをクリックします。

「Markdown」を選択 して文章を書きます。 保存する場合はメニューバーからファイル保存もしくはショートカットキーで +Sを選択します。拡張子「md」で保存されます。

これで文章が保存されました。 保存する場所は「デスクトップ」以外でも、ローカルで好きな場所を選んで下さい。

主な記述方法

主なMarkdown記述

# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6
> 引用
___ 分割線(ハイフンもしくはアンダーバーを3回打ち)
[リンク] (リンクURL)リンクを形成
**強い強調** アスタリスクで文字を囲む
_強調_(アンダーバーで囲む)
* リスト(アスタリスクと半角空ける)
1. 番号付きリスト(ピリオドと半角空ける)
``` (バックスラッシュ3回打ち)バッククォートで文章をはさむと「ソースブロック」
~~  ~~で、はさむと打ち消し線

他にもまだありますが、構成中心に考えるならまずはこれだけ押さえていれば大丈夫です。

マークダウン記法一覧

大きさ

ここに数値を入れることで、フォントサイズを変えることが出来ます。

フォントの太さ

太さを制御

メニューより好きな太さを選んで下さい。(デフォルトは400です)

プレビュー

プレビュー設定

検索窓に「Markdown」と入力。プレビューのフォントを指定することが出来ます。

"markdown.preview.fontFamily": "'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', 'Ubuntu', 'Droid Sans', sans-serif"

間に空白が入るフォントは、シングルクォーテーション(‘)ではさみます。これは初期設定に「Noto Sans JP」を追加している画面です。これでまずは日本語で使う環境が出来ました。

その他の設定

設定箇所が多いので、特に気になるポイントだけを取り上げます。例えばカッコを挿入した場合、「Auto Closing Brackets」を➡️「always」にすることで、(  ➡️ ()と自動的に入力補完をしてくれます。


メリット

good
  • 無料
  • 起動が高速で、動きが軽快
  • メモリをあまり食わない
  • あのマイクロソフトが開発している
  • 拡張機能が豊富で、カスタマイズが自由に出来る

しかもバージョンアップもちゃんと行われているので安心。開発意欲が高く感じられるのも、好感が持てます。

デメリット

bad
  • 元々開発者用ソフトの為、最初は少しとっつきにくい
  • 設定箇所が多すぎて分かりにくい
  • ショートカットキーの初期設定が独特
  • 【Ulysses】の様にWordPressに直接投稿出来る拡張機能が無い
MEMO
私の環境で600個以上の設定箇所がありました。上で説明した以外、殆どは初期設定のままで大丈夫です。
マークダウンエディタ【Ulysses】についての記事はこちらをどうぞ。
Ulyssesアイキャッチ画像 【Ulysses】(ユリシーズ) WordPressに最適なMarkdownエディタ
あわせて読みたい
アイキャッチ画像 【Visual studio code】を快適に使うオススメのショートカットキー

それでは「Visual Studio Code」をより便利で快適に使うために、「拡張機能」をインストールして行きましょう。