VSCode:MPE:reveal.js ができちゃった

Markdown Preview Enhanceのドキュメントを読んでいます。

この拡張プラグインで僕が使う範囲のプレゼン資料はできてしまいました。汗;

Presentation reveal.js の記述1、2があったので、次のmdファイルを作ってみました。

コード記述部分の'が1個足りないのと、参照している画像jpeg,svgは別途用意してみてください。

---
presentation:
  # presentation theme
  # === available themes ===
  # "beige.css"
  # "black.css"
  # "blood.css"
  # "league.css"
  # "moon.css"
  # "night.css"
  # "serif.css"
  # "simple.css"
  # "sky.css"
  # "solarized.css"
  # "white.css"
  # "none.css"
  theme: beige.css
  width: 960
  height: 700
  enableSpeakerNotes: true
  progress: true
  slideNumber: true
  fragments: true
  # fade-out                  Start visible, fade out
    # fade-up                   Slide up while fading in
    # fade-down               Slide down while fading in
    # fade-left               Slide left while fading in
    # fade-right                Slide right while fading in
    # fade-in-then-out        Fades in, then out on the next step
    # fade-in-then-semi-out   Fades in, then to 50% on the next step
    # grow                    Scale up
    # shrink                    Scale down
    # strike                    Strike through
    # highlight-red           Turn text red
    # highlight-green           Turn text green
    # highlight-blue            Turn text blue
    # highlight-current-red   Turn text red, then back to original on next step
    # highlight-current-green   Turn text green, then back to original on next step
    # highlight-current-blue    Turn text blue, then back to original on next step
  mouseWheel: true
  transition: 'default' # none/fade/slide/convex/concave/zoom
  transitionSpeed: 'default' # default/fast/slow
  backgroundTransition: 'default' # none/fade/slide/convex/concave/zoom
---
<!-- slide -->
# MPE & reveal.jsのテスト

by
<a href="https://shd101wyy.github.io/markdown-preview-enhanced/#/">Markdown Preview Enhanced(MPE)</a>

<a href="https://revealjs.com/#/">reveal.js</a>

<!-- slide -->
## 文字のみ

これは１ページ目のスライドです。

<!-- slide -->
## テーブル

|item01|item02|item03|
|:-|-:|:-:|
|ひだり|みぎ|まんなか|
|>|みぎ|まんなか|
|ひだり|みぎ|まんなか|
|^|みぎ|まんなか|

<!-- slide data-notes="Write your note here"-->
## 画像
<div style="text-align:center;">
  <img src="./attach/02.jpg" style="width:600px;"/>
</div>

<!-- slide -->
## 効果のテスト
- Item 1 <!-- .element: class="fragment fade-in" data-fragment-index="1" -->
- Item 2 <!-- .element: class="fragment fade-in" data-fragment-index="2" -->

<!-- slide -->
## 効果のテスト2
<p class="fragment">Fade in</p>
<p class="fragment fade-out">Fade out</p>
<p class="fragment highlight-red">Highlight red</p>
<p class="fragment fade-in-then-out">Fade in, then out</p>
<p class="fragment fade-up">Slide up while fading in</p>

<!-- slide -->
## 効果のテスト3
<span class="fragment fade-in">
  <span class="fragment highlight-red">
    <span class="fragment fade-out">
      Fade in > Turn red > Fade out
    </span>
  </span>
</span>

<!-- slide -->
## KaTex

$$f(x)=x^2+2$$

<!-- slide -->
## code
``latex
\documentclass{standalone}
\begin{document}
  Hello world!
\end{document}
``
<!-- slide vertical=true -->
code chunk うごかない。
``python {cmd=python}
for i in range(5):
    print("Hello World")
``
<!-- slide -->
## SVGのテスト
<div style="text-align:center;">
  <img src="./attach/Asset9.svg" style="width:600px;"/>
</div>

正確には中身をもう少しよく見て、テーブル罫線のcssなどを変更する必要があるかもしれませんが、とりあえずメモ。

今日はここまで。