はじめに
プレゼン資料などを作成するときにMarpを利用することがあると思う。Marp自体はマークダウンで記述するので、図やグラフなどは画像などにして張り付けることが必要になるが、Mermaidを利用すると、Marpの資料に図を簡単に入れ込むことができる。
今回は、MarpでMermaidを利用している場合に、VS Codeでプレビューする方法をみていきたい思う。また、VS CodeからMarpをPDFやPPTXにエクスポートするのではなく、marp-cliを利用して、エディターに依存せずMarpからPDFやPPTXを作成する方法も見ていく。
VS CodeでMermaidを利用したMarpのプレビューをする方法
- VS Code の
.vscode/settings.jsonに以下を追記
{
...
"markdown.marp.enableHtml": true
}
-
Marp for VS Codeを追加する
-
Ctrl + Shift + P で
Markdown: Change Preview Security Settingsを検索し、Disabledを設定する
以上で完了になる。後は、以下のようなマークダウンを作成して、VS Codeでプレビューして図が描かれればOK。
---
marp: true
style: div.mermaid { all: unset; }
---
<div class="mermaid">
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2015-01-12 , 12d
another task : 24d
</div>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10.0.0/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
window.addEventListener('vscode.markdown.updateContent', function() { mermaid.init() });
</script>
- 参考：https://github.com/marp-team/marp-core/issues/139
- 参考：Enable HTML in Marp Markdown
- 参考：Markdown preview security
marp-cliでMermaidを利用したMarpからPDFやPPTXを生成する方法
marp-cliを利用する事で、VS Codeなどを利用せずともコマンドラインでMarpからPDFやPPTXなどを作成できるようになる。ただ、Mermaidを利用している場合、以下のようなコマンドでMarp→PPTXを作成しても、scriptやHTMLのタグがそのままになってしまい期待通りの出力ならない。
$ docker run --rm -v $PWD:/home/marp/app/ -e LANG=$LANG -e MARP_USER="$(id -u):$(id -g)" marpteam/marp-cli --pptx report.md --allow-local-files
これを解決するには、--htmlオプションも一緒に利用する必要がある。つまり、以下のようなコマンドにすると、HTMLに変換してそれをPPTXとして出力してくれるので、期待通りの出力結果になる。
$ docker run --rm -v $PWD:/home/marp/app/ -e LANG=$LANG -e MARP_USER="$(id -u):$(id -g)" marpteam/marp-cli --pptx report.md --html --allow-local-files
