環境
- VsCode 1.63.2
プレビュー表示
プレビュー表示のないマークダウンなんて、マークダウンじゃないですよね。
コマンドパレット(Ctrl + Shift + P)を実行すると、Markdown:プレビューを横に表示という項目があるので、クリックします
そうすると、画面右側にプレビュー表示されます。いい感じですね。
プレビューをオシャレに
https://marketplace.visualstudio.com/items?itemName=bierner.markdown-preview-github-styles
マーケットプレースでVS Codeの拡張機能「Markdown Preview Github Styling」を導入します。 Markdown Preview Github Stylingと検索し、インストールをクリックします。
インストールして、再度プレビューを表示すると、GitHub風になります。シャレオツ。
Markdown All in One
マークダウンを利用するために欠かせない機能たち
https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one
マーケットプレースで拡張機能からMarkdown All in Oneをインストールします。
主に以下の機能が使用できるようになります。
ショートカットキー
例えば文字を強調表示したいときには、その範囲を「**」で囲むひつようがありますが、対象のテキスト範囲を選択して、Windowsなら Ctrl + B 、Macなら ⌘B で実行することができます。
他にも、Ctrl+Iで文字を斜体にできたり、Alt+Cでチェックリストのオンオフを切り替えたりできるようになります。
見出しのナンバリング
コマンドパレットからMarkdown All in One: Add/Update section numbersを実行すると見出しに自動でナンバリングしてくれます。素敵やん。
箇条書き・番号付きリストの入力支援
箇条書き・番号付きリストの入力が超絶楽になります。リスト入力で改行をすると「-」やインデントが自動で入るなど。
リンク(URL)の入力支援
リンクの入力も手軽にできます。クリップボードにコピーしたリンクを Ctrl + V、または ⌘V で貼り付けるだけで自動でリンク(URL)として表示してくれます。
目次の自動生成
作成した見出しに応じて、目次を自動生成してくれる機能です。 Ctrl + Shift + P でコマンドパレットを出し、create table of contentsと検索し、目次(TOC)の作成をクリックするだけで自動挿入してくれます
なお、目次を作成した後に見出しを追加すると、ファイルを保存した時に目次も更新されるようになっています。神・・・
また、指定した見出しは目次に入れないということも可能です。手順としては、対象の見出しの上に<!-- omit in toc -->というコメントを入れてあげるだけでOKです。
Htmlへの変換
コマンドパレットから、markdown html などで検索し、Print documents to HTMLを実行すると htmlとして出力することが可能。
その他の機能については、マーケットプレイスを直接参照されたし
https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one#features
Markdown PDF
これもVscodeの拡張機能の一つで、マークダウンファイルからPDFやHTMLを出力できます。デフォルトの出力形式はPDFになっているため、HTMLにしたい場合は設定変更が必要です。
https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf
pdf, html, png, jpeg形式に対応していますので、必要に応じて追加します。 出力する際は、コマンドパレットからPDF:Export(settings.json)を選択することで出力できます
プレゼン・スライド資料の作成
Marp for VS Codeをインストールすることで、Markdownで記述した文書をスライド化してプレゼン資料を作成することが可能。
https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode
スライド化の必須設定
以下のコメントをmdファイルの最上部に記載する
--- marp: true ---スライドの区切り
スライドの区切りは以下のどちらかで可能
- --- を使用する
- headingDividerで区切りとする見出しを指定する(1を指定すると見出し1ごとにスライドが分かれる)
<!-- headingDivider: 1 -->プレビュー
コマンドパレット(Ctrl + Shift + P)から、Open Preview
PDF出力
コマンドパレットにExport slide deckと入力し、Marp: Export Slide Deckを選択すると、pdf出力可能
すんばらしい。
なお、HTMLでエクスポートすると、 プレゼンテーションモードで表示することも可能。
スタイル変更など
テーマの指定、ヘッダーフッター、背景色、ページ番号の表示、文字色などなどいろいろ指定できる。
---
marp: true
theme: gaia
header: "サンプルプレゼン資料"
footer: "by **masayan**"
paginate: true
backgroundColor: #2F3232
color: #ffffff
---
<!--
headingDivider: 1
-->なお、アンダースコア(_)をつけると、特定のスライドだけにその設定を適用することも可能です。
<!--
_backgroundColor: orange
-->
# 1. プロジェクト概要その他いろいろと設定があるみたいなので、以下を参照されたし
https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode
画像の貼り付け
Markdownに画像を挿入する場合、デフォルトでは以下のような手順が必要ですが、 Markdown Imageという拡張機能を入れるとコピーペーストで簡単に画像を貼り付けることが可能です。
- フォルダに画像を格納する
- Markdownの画像挿入の記述をする ※
※また、設定により画像の保存先を変更できます。 設定画面をctrl + ,で開き、Paste Imageと入力し、Pathの項目に画像の保存先を指定する。(以下はmdファイルと同階層にあるimagesディレクトリ内に保存されます
静的解析
markdownlintという拡張機能を使用すると、markdownファイルの静的解析が可能になります。
https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint
余計なブランクがあったりすると、黄色の波線が表示されるので、一定程度スタイルを統一することが可能です
文字数カウンター
CharacterCountという拡張機能を使用すると、editorの左下にmdファイルに含まれる文字数をリアルタイムでカウントして表示してくれます
https://marketplace.visualstudio.com/items?itemName=8amjp.charactercount
スニペット
あらかじめ、mdファイルの用途に応じてテンプレートを作成できる機能です。
動作イメージ
あらかじめ登録しておいたキーワードを入力すると、そのキーワードに対応するmdのテンプレートが挿入されます。
設定手順
VsCodeでmarkdownのスニペットを有効にする
ファイル → 基本設定 → 設定 → 拡張機能 → settings.json で編集 を選択し、以下を追記
"[markdown]": {
"editor.wordWrap": "on",
"editor.quickSuggestions": true,
"editor.snippetSuggestions": "top"
},マークダウン用のスニペット設定を作成する
ファイル → 基本設定 → ユーザースニペット → Markdown.json を選択。
markdown.jsonを選択
標準的なスニペットの登録方法
"スニペット名": {
"prefix": "キーになる文字列",
"body":[ "呼び出される文字列" ],
"description": "このスニペットの説明文" }- スニペット名 重複しなければ自由に付けて大丈夫です。
- キーになる文字列 この文字列を入力（途中でも）することでスニペットが起動します。
- 呼び出される文字列 上記、キーになる文字列をこちらの文字列で置き換えます。
- このスニペットの説明文 スニペットの候補とともにこの説明文が表示されるので、分かりやすいコメントを書いておきましょう。
設定例
設定例として、打合せ議事録、Todoリスト、メモ用のスニペットを記載しておきますので参考にしてみてください。
markdown.json
{
"meeting": {
"prefix": "m",
"body": [
"# <会議体名>",
"## 日時",
"## 場所",
"## 出席者",
"-",
"## 議題",
"1. [議題1](#link)",
"2.",
"3.",
"## 議事内容",
"### 議題1",
"## 決定事項",
"- 決定事項1",
"## アクション事項",
"- [ ] アクション",
"## 次回",
"yyyy/mm/dd (予定、時間は追って連絡)",
],
"description": "打合せ議事録"
},
"todo": {
"prefix": "m",
"body": [
"# Todo",
"## AM",
"- ",
" - ",
"- ",
" - ",
"- ",
" - ",
"- ",
"## PM",
"- ",
" - ",
"- ",
" - ",
"- ",
" - ",
"- ",
],
"description": "Todo",
},
"memo": {
"prefix": "m",
"body": [
"# Memo",
"## Title",
"- 1 ",
" - 1-1 ",
"- 2 ",
" - 2-1 ",
],
"description": "メモ",
},
}まとめ
いかがでしたでしょうか。本記事では、VsCodeでマークダウンファイル(.md)を快適に使用するためのいくつかのTipsを紹介しています。Github風のプレビュー表示や、PDF出力、画像貼り付け、スニペットのテンプレート機能などの便利な機能がたくさんあるので、ぜひ導入してみてください。