SlidevのMarkdown記法一覧
このページではSlidevのmarkdown記法を一覧で紹介します。
Markdownの機能は通常通り使用することができます。
ページの区切り
ページの区切りは---です。
1ページ目
---
2ページ目
見出し
見出しは通常のMarkdownと同じです。
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
区切り線
***もしくは___(アンダースコア3つ以上)と記述すると、区切り線を表示できます。
以下の例のように、"What is Slidev?"の下にある線のように区切り線が表示されます。
リスト
リストは-、*、+が使えます
- list1
- list2
- list2-1
- list2-2
番号付きリスト
1. list1
2. list2
3. list3
目次
以下のように記述すると、見出し1で設定されたタイトルが目次として挿入されます。
<Toc />
目次に挿入したくないスライドには、フロントマターに以下のように記述します。
---
hideInToc: true
---
リンク
リンクも通常のMarkdown記法と同様に記述することができます。
[アンカーテキスト](リンクのURL)
脚注
脚注は以下のように記述します。
脚注を付けるよ！[^1]
[^1]: 脚注を付けたよ！
コードブロック
コードブロックも基本的にはMarkdownと同じです。
```ts
console.log('Hello, World!')
```
Slidevでは特定の行をハイライトすることができます。ブラケット{}の中にハイライトしたい行番号を記述します。
```ts {2,3}
function add(
a: Ref<number> | number,
b: Ref<number> | number
) {
return computed(() => unref(a) + unref(b))
}
```
2行目から3行目をハイライトしたい場合は{2-3}、2行目までをハイライトしたい場合は{-2}、3行目以降をハイライトしたい場合は{3-}と記述できます。
ハイライトする行を複数ステップに分けて変更するには、|を使用して行番号を分割します。こうすることで、→(right)キーと←(left)キー、もしくはクリックでアニメーションとして実行することができます。
```ts {2-3|5|all}
function add(
a: Ref<number> | number,
b: Ref<number> | number
) {
return computed(() => unref(a) + unref(b))
}
```
{monaco}を追加することで、コードブロックをMonacoエディタに切り替えることができます。Monacoエディタに切り替えることで、プレゼンテーション中にコードの変更を行うことができます。
```ts {monaco}
console.log('HelloWorld')
```
なお、SlidevはシンタックスハイライターとしてPrismとShikiをサポートしています。
設定方法や詳細は以下をご参照ください。
画像
リモートの画像
ローカルの画像
Slidevではpublicフォルダに画像を保管し、以下のように頭にスラッシュ/を付けて参照します。
埋め込みスタイル
Markdownで直接<style>タグを使用すると、<style>タグを記述したスライドのスタイルを変更(上書き)することができます。ほかのスタイルには反映されません。
# このページの見出し1は赤色になる
<style>
h1 {
color: red
}
</style>
---
# 他のスライドには反映されない
表
| col1 | col2 | col3 |
|:-------|:--------:| -----:|
| 左揃え | 中央揃え | 右揃え |
| left | center | right |
引用
> 引用文
> 引用文
ノート
各スライドの最後のコメントブロック<!-- -->はノートとして扱われます。ノートはプレゼンターモードのときに表示され、プレゼンテーションの際に参照することができます。
# Page 1
<!-- 一番最後のコメントブロックはノートとして扱われる -->
---
アイコン
<{collection-name}-{icon-name} />の形式でアイコンを挿入することができます。
<logos-vue />
数式
SlidevはKaTeXによってLaTeXをサポートしています。
ブロックで数式を挿入する場合は$$で数式の記述を囲みます。
$$
y = x + 1
$$
インラインで数式を挿入する場合は$で数式の記述を挟みます。
$y = x + 1$
図形
SlidevではMermaidを利用して、Markdownから図やグラフを作成することが可能です。
コードブロックにmermaidを追加します。
```mermaid
sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
```
SlidevはVueのコンポーネントを使うことができるので、以下のようにTwitterを簡単に埋め込むことができます。
<Tweet id="ツイートのID" />
YouTube
Twitter同様、YouTubeの動画も簡単に埋め込むことができます。
<Youtube id="動画のID" />
Discussion