Open1

Marp for VS Code で marmaidの図を含むテキストを変換できるようにした

o_tsuboo_tsubo

手順

  1. MarpでMermaidを利用している場合のVS Codeでプレビューする方法・marp-cliで変換する方法を参考に設定ファイルと設定を変更する 
{
    ...
   "markdown.marp.enableHtml": true
}
  1. 以下の様なmarkdownを利用してプレビューする 
---
title: test
slide: true
marp: true
---

<!-- preタグ内にMermaid記法で出力したい図のコードを書く -->

### aaa

<pre class="mermaid">
quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]

</pre>
<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>

---

# bbb