VsCodeで快適なマークダウンライフを送るためのTips

VsCodeは人気のIDEとして有名ですが、マークダウンファイルの作成・編集用としてもとても高機能で使いやすいです。 本記事では、マークダウン周りの便利な拡張機能や使い方について紹介していますので、ぜひご活用ください。

環境

  • VsCode 1.63.2

プレビュー表示

マークダウンファイルを書いている途中に、プレビュー表示したいですよね。

コマンドパレット(Ctrl + Shift + P)を実行すると、Markdown:プレビューを横に表示という項目があるので、クリックします

そうすると、画面右側にプレビュー表示されます。いい感じですね。

プレビューをオシャレに

Markdown Preview Github Styling - Visual Studio Marketplace
Extension for Visual Studio Code - Changes VS Code's built-in markdown preview to match Github's style

マーケットプレースでVS Codeの拡張機能「Markdown Preview Github Styling」を導入します。Markdown Preview Github Stylingと検索し、インストールをクリックします。

インストールして、再度プレビューを表示すると、GitHub風になります。シャレオツ。

プレゼン・スライド資料の作成

Marp for VS Codeをインストールすることで、Markdownで記述した文書をスライド化してプレゼン資料を作成することが可能。 https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode

スライド化の必須設定

以下のコメントをmdの最上部に記載する

--- marp: true ---

スライドの区切り

スライドの区切りは以下のどちらかで可能

  • — を使用する
  • headingDividerで区切りとする見出しを指定する(1を指定すると見出し1ごとにスライドが分かれる)
<!-- headingDivider: 1 -->

プレビュー

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

コメント

タイトルとURLをコピーしました