| theme | title | download | lineNumbers | background | class |
|---|---|---|---|---|---|
seriph |
SlidevのMarkdown記法サンプル |
false |
true |
text-center |
公式サンプルにないtipsもあるよ
各章の冒頭スライドはこのように表示されるのですね。
center表示もできます。
layout: cover background: https://source.unsplash.com/collection/94734566/1920x1080
seriphテーマで使えるcoverレイアウトです。このように背景画像も指定できます。
これは本文です。H4から先は書体が変わりませんね。どうやら有効なのはH3まででしょうか。
でも、H3はかなり小さい文字になるのと灰色なのでほとんど使う機会はない印象。
使用するテーマを変えたり、テーマをカスタマイズすることで変更できそうです。
よいテーマを見つけた/作った方はぜひ教えて下さい。
これは本文です(太字)
これも本文です(取り消し)
じゃあ私も本文です(イタリック)
なお、--- を書くとページが区切られます。お試しくださいませ。
リストの表示を見てみましょう。
なにげにGridレイアウト使って左右にコンテンツを配置していますのでその記法もご確認ください。
箇条書きリストだよ
- AAAA
- aaaa
- aaaa
- BBBB
- bbbb
- bbbb
番号付きリストだよ
- AAAA
- aaaa
- aaaa
- bbbb
- BBBB
- bbbb
普通、Markdownで以下のように書くと [ ] 部分がチェックボックスとして描画されますけどSlidevではそうならないみたいですね。
- タスク1
- タスク2
テーブルがどのように表示されるか見てみましょう。
突然のPython講義。
Pythonには、シーケンス型に属する型として以下があります。
| 型 | 概要 |
|---|---|
| リスト | データの並びを表現できます。 |
| タプル | リストと同じように使えますが、生成後は中身を変更できないことが保証されています。 |
| range | 数の並びを表します。ループと組み合わせて使うことが多いです。 |
| テキストシーケンス | いわゆる文字列型です。 |
| バイナリシーケンス | バイナリ(バイト列)を扱えます。 |
リロードするたびにランダムで画像が変わります。Gridレイアウトをタイルのようにつかうのも良さそうですね。
画像などのassetsはpublicディレクトリに格納すると良いです。SPAのドキュメントルートにコピーされます。
Icons | Slidev に利用可能なアイコンの情報があります。
Tailwind CSS のクラスを設定するとAnimationなど面白い効果が狙えるかもしれません。
<style> .language-bash span.line { /* bashのコード */ margin-left: -40px; /* 左に40px移動して行番号を隠す(邪道) */ } </style>
行番号が表示されているのは 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]組版にも対応。数式をかっこよく書きたい場合に使えそうですね。
これは中央に配置されるようです。
$$ \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} $$
このページは講義資料のような雰囲気がありますね。
<style> .language-markdown span.line { /* markdownのコード */ margin-left: -40px; /* 左に40px移動して行番号を隠す(邪道) */ } </style>
Vueのコンポーネントが使えるので簡単に埋め込めます。
画像ではないので文字コピーやリンククリックもできます。
Markdownに書くのはこれだけでOK。
<Tweet id="1423237009561186308"/>参考になったよという方はぜひTwitterのフォローといいねをポチッとしていただけると喜びます。
YouTube動画の埋め込みコード(HTML)を貼りつけてみました。動画が埋め込めています。
スライド上で動画を再生できるのは画面切り替えが不要なので嬉しいですね。
YouTubeに限らず、各種サイトで埋め込みコードが用意されているものはスライドに埋め込める可能性があります。
ただし<scrpit>タグで埋め込むタイプのコンテンツは埋め込めないかもです。
Mermaid記法 による Jiro Flow
graph LR
A{add garlic?}
B[OK]
C[protocol error <br>]
D[as is]
E[garlic]
F[vegetable]
G[oil]
H[sauce]
A -->|YES or No| C
A --> D
A --> E
E --> F
A --> F
F --> G
A --> G
G --> H
A --> H
D --> B
E --> B
F --> B
G --> B
H --> B
よいSlidevライフを！