Marpを使用すると、Markdownを使って簡単にプレゼンテーション資料を作成できます。このガイドでは、MarpをVS Codeのプラグインとして、またはコマンドラインインターフェース(CLI)を通じて当サイトのテンプレートを使用する方法を説明します。
Marpのインストール
VS Codeプラグインを使う場合
- Visual Studio Codeを開きます。
- 拡張機能ビューを開くには、サイドバーの四角いアイコンをクリックするか、
Ctrl+Shift+X
(Macの場合はCmd+Shift+X
)を押します。 - 検索バーに「Marp」と入力し、検索結果から「Marp for VS Code」を見つけます。
- 「インストール」ボタンをクリックします。
インストールが完了すると、MarkdownファイルでMarpの機能を使用できるようになります。
marp-cliを使う場合
Marp CLIを使用するには、まずNode.jsがインストールされている必要があります。Node.jsがまだない場合は、公式サイトからダウンロードしてインストールしてください。
- コマンドプロンプト(Windows)またはターミナル(macOS/Linux)を開きます。
- 次のコマンドを入力してMarp CLIをグローバルにインストールします。
sh npm install -g @marp-team/marp-cli
これで、コマンドラインからMarpの機能を利用できるようになります。
デザインCSSの利用方法
ファイルの準備
当サイトのCSSをコピーして、適当なファイル保存します。ここでは、theme.css
というファイル名で保存したと想定します。
またテンプレートを適用するファイル名をmarp.md
と想定します。
theme.css
とmarp.md
は同じディレクトリに配置しているものと想定します。
CSSファイルへのパスの指定
CSSを利用するためには、利用するCSSファイルの場所(パス)を指定する必要があります。
marp.md
のファイルの先頭に以下のように記述することで、CSSを指定することができます。
---
marp: true
theme: custom_theme
style: |
@import 'theme.css';
---
theme: custom_theme
のcustom_theme
については、theme.css
中のテーマ名と一致させる必要があります。
/* @theme custom_theme */
CSSファイルでは上のようにテーマ名が指定されています。
marp-cliを使う場合
markdown中でCSSを指定して、marp-cli を利用する場合は、--allow-local-files
のオプションを指定する必要があります。
下は、pdf形式でスライドを出力する場合のコマンドです。
marp test.md --pdf --allow-local-files