1.1. 見出しのレベルや書体の見栄えを見てみよう

H1です

H2です

H3です

H4です

H5です

これは本文です。H4から先は書体が変わりませんね。どうやら有効なのはH3まででしょうか。
でも、H3はかなり小さい文字になるのと灰色なのでほとんど使う機会はない印象。

使用するテーマを変えたり、テーマをカスタマイズすることで変更できそうです。
よいテーマを見つけた/作った方はぜひ教えて下さい。

これは本文です(太字)

これも本文です(取り消し)

じゃあ私も本文です(イタリック)

なお、--- を書くとページが区切られます。お試しくださいませ。

1.2. リスト

リストの表示を見てみましょう。
なにげにGridレイアウト使って左右にコンテンツを配置していますのでその記法もご確認ください。

普通、Markdownで以下のように書くと [ ] 部分がチェックボックスとして描画されますけどSlidevではそうならないみたいですね。

• [ ] タスク1
• [x] タスク2

1.3. テーブル

テーブルがどのように表示されるか見てみましょう。

突然のPython講義。

Pythonには、シーケンス型に属する型として以下があります。

1.4. 画像

リロードするたびにランダムで画像が変わります。Gridレイアウトをタイルのようにつかうのも良さそうですね。

画像などのassetsはpublicディレクトリに格納すると良いです。SPAのドキュメントルートにコピーされます。

1.5. アイコン

Icons | Slidev に利用可能なアイコンの情報があります。

Tailwind CSS のクラスを設定するとAnimationなど面白い効果が狙えるかもしれません。

1.6. コード

行番号が表示されているのは lineNumbers: true のおかげです。
4行目以降がハイライトされているのは {4-} のおかげです。

import os
test_path = os.path.join("data", "data-01.txt")

f = open(test_path, "a", encoding="utf-8")
f.write("this is new append line\n")
f.close()

import os
test_path = os.path.join("data", "data-01.txt")

with open(test_path, "a", encoding="utf-8") as f:
    f.write("this is new append line\n")

以下は行番号を表示しないようにしてみました。
この章の<style>に指定しているlanguage-bash span.lineをご参照ください。

$ ps aux
USER         PID %CPU %MEM    VSZ   RSS TTY      STAT START   TIME COMMAND
root           2  0.0  0.0      0     0 ?        S     7月20   0:00 [kthreadd]
root           3  0.0  0.0      0     0 ?        I<    7月20   0:00 [rcu_gp]
root           4  0.0  0.0      0     0 ?        I<    7月20   0:00 [rcu_par_gp]
root          12  0.0  0.0      0     0 ?        S     7月20   0:07 [migration/0]

1.7. LaTeX

組版にも対応。数式をかっこよく書きたい場合に使えそうですね。

$\sqrt{3x-1}+(1+x)^2$

これは中央に配置されるようです。

$$\begin{array}{c} \sin x = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n+1)!} x^{2n+1} \end{array}$$

であるからして、これがこうなってこうじゃ。

$$\begin{array}{c} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{array}$$

このページは講義資料のような雰囲気がありますね。

1.8. Twitter

Vueのコンポーネントが使えるので簡単に埋め込めます。
画像ではないので文字コピーやリンククリックもできます。

<Tweet id="1423237009561186308"/>

参考になったよという方はぜひTwitterのフォローといいねをポチッとしていただけると喜びます。

1.9. YouTube

YouTube動画の埋め込みコード(HTML)を貼りつけてみました。動画が埋め込めています。
スライド上で動画を再生できるのは画面切り替えが不要なので嬉しいですね。

YouTubeに限らず、各種サイトで埋め込みコードが用意されているものはスライドに埋め込める可能性があります。
ただし<scrpit>タグで埋め込むタイプのコンテンツは埋め込めないかもです。

1.10. Flowchart diagrams

Mermaid記法 による Jiro Flow