記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

VSCodeでmarkdownを記述する方法・オススメ拡張機能

会社や個人、ブログなどで使用する人も多いmarkdown。 テキストエディタVSCodeを使用しmarkdownを記述すると、驚くほど多いメリット。 今回は、VSCodeを使用しmarkdownを記述する方法について解説していきます。

カテゴリ: Visual Studio Code

こんにちは!
会社や個人、ブログなどmarkdown形式で記述している方も多いのではないでしょうか?
markdown自体が簡単に記述でき、覚えやすい記法なのですが、「プレビュー機能」、「ショートカットキー」などの機能を追加し、わかりやすく、さらに効率的に使用できる方法があります。
それは、VSCodeを使用しmarkdownを記述する事です。
VSCodeには「プレビュー機能」、「ショートカットキー」などの機能を付け加える事ができますので、これまでmarkdownを記述していた方は、より便利に効率的な記述をする事ができます。
本記事では、VSCodeでmarkdownを記述する「メリット」「方法」「オススメ拡張機能」を中心に解説していきます。

markdownを使うメリット

markdownを使うメリットは

1.文書構造を明示してくれる
2.簡単で覚えやすく、使いやすい
3.シンプルに綺麗に表示してくれる
4.簡単に他のフォーマットに変換する事ができる

4点の理由から、文章フォーマットとして利用されている方が多いです。

Visual Studio Codeとは

Visual Studio Code(VSCode)とは、マイクロソフト社が無料で提供しているテキストエディタの事であり、世界中のエンジニアの中でも利用者の多い人気ソフトです。

VSCodeでmarkdownを記述するメリット

VSCodeでmarkdownを記述するメリットは

1.markdownをリアルタイムでプレビューしてくれる
2.markdownの記述・ショートカットキー・プレビューに便利な拡張機能がある
3.無料で使用できる

上記3点から VSCodeを利用しmarkdownを記述することで、より早く便利に記述する事ができます。
特に、これまで普通のテキストエディタでmarkdownを記述されていた方は、VSCodeを利用する事でよりメリットを感じる事ができます。

markdown基本文法

見出し

見出しコード

見出しコード表示結果

テキスト装飾・強調

テキスト装飾・強調コード

テキスト装飾・強調コード表示結果

リスト(順序なし)

リスト(順序なし)コード

リスト(順序なし)コード表示結果

リスト(順序あり)

リスト(順序あり)

リスト(順序あり)表示結果

ソースコード挿入

ソースコード挿入コード

ソースコード挿入コード表示結果

水平線

水平線コード

水平線コード表示結果

リンク

リンクコード

リンクコード表示結果

画像表示

画像表示コード

画像表示コード表示結果

テーブル表

テーブル表コード

テーブル表コード表示結果

文章の引用

文章の引用コード

文章の引用コード表示結果

文章の二重引用

文章の二重引用コード

文章の二重引用コード表示結果

markdown作成・プレビュー

VSCodeでmarkdown作成

まずはフォルダを作成します。
デスクトップ上で右クリック、新規フォルダ作成。
右クリック名前を変更、今回は「example」とします。



「example」フォルダをVSCodeにドラックアンドドロップ。



ファイル作成マークを押し名前をつけ、末尾に.mdという拡張子を付けます。
この拡張子「.md」をつけ、このファイルをmarkdownファイルにします。
今回はファイル名を「test.md」とします。



このファイルに記述していきます。
例として「# 見出し1」「*テキスト1*」
を記載します。


記述内容を確認する為、プレビューしてみます。

VSCodeでmarkdownファイルをプレビュー

プレビューするには、プレビューボタンを押し、プレビューする事ができます。

VSCodeでmarkdownオススメ拡張機能

VSCodeで拡張機能追加方法

VSCodeを開き「拡張機能ボタン」をクリック→検索バーに追加したい拡張機能名を記述→インストールをクリックします。

オススメ拡張機能

Markdown All in One

「キーボードショートカットキー」「目次の作成」「見出しのナンバリング」など、Markdownに必要な機能が多く入っています。

Markdown PDF

MarkdownをPDFとして書き出してくれる拡張機能です。

Markdownlint

Markdownの構文やスタイルをチェックしてくれる拡張機能です。

Excel to Markdown table

エクセル上でコピーしたセルをペーストするとMarkdown のテーブル形式で貼り付けてくれます。

Copy Markdown as HTML

Markdown で記載したテキストを、HTMLに変換した状態でクリップボードにコピーしてくれます。

Markdown Preview Github Styling

Markdownをリアルタイムプレビュー。どのMarkdownファイルのプレビューにも共通で適用する事ができ、デザインの統一化もできます。

Prettier – Code formatter

Markdownを記述し保存すると、コードを自動整形してくれます。

まとめ

VSCodeでmarkdownを記述する「メリット」「方法」「オススメ拡張機能」を中心に解説してきました。

最後にポイントをまとめます。

1.VSCodeでmarkdownを記述するメリットは
①.markdownをリアルタイムでプレビューしてくれる
②.markdownの記述・プレビューに便利な拡張機能がある
③.無料で使用できる

2.VSCodeでmarkdownを作成する方法は
ファイルに拡張子「.md」をつけてmarkdown形式で記述していく

3.VSCodeでのmarkdownオススメ拡張機能
①Markdown All in One
②MarkdownPDF
③Markdownlint
④Excel to Markdown table
⑤Copy Markdown as HTML
⑥Markdown Preview Github Styling
⑦Prettier – Code formatter



いかがだったでしょうか?
本記事を参考に「markdown」についてアップデートしていただけたら幸いです。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。