📚

SlidevのMarkdown記法一覧

2022/11/25に公開約3,400字

このページではSlidevのmarkdown記法を一覧で紹介します。
Markdownの機能は通常通り使用することができます。

ページの区切り

ページの区切りは---です。

1ページ目

---

2ページ目

見出し

見出しは通常のMarkdownと同じです。

# 見出し1
## 見出し2
### 見出し3
#### 見出し4

区切り線

***もしくは___(アンダースコア3つ以上)と記述すると、区切り線を表示できます。
以下の例のように、"What is Slidev?"の下にある線のように区切り線が表示されます。

slidev_separate_line

リスト

リストは-*+が使えます

- 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はシンタックスハイライターとしてPrismShikiをサポートしています。
設定方法や詳細は以下をご参照ください。

https://ja.sli.dev/custom/highlighters.html

画像

リモートの画像

![リモートの画像](https://sli.dev/favicon.png)

ローカルの画像

Slidevではpublicフォルダに画像を保管し、以下のように頭にスラッシュ/を付けて参照します。

![ローカル画像](/pic.png)

埋め込みスタイル

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
```

Twitter

SlidevはVueのコンポーネントを使うことができるので、以下のようにTwitterを簡単に埋め込むことができます。

<Tweet id="ツイートのID" />

YouTube

Twitter同様、YouTubeの動画も簡単に埋め込むことができます。

<Youtube id="動画のID" />

参考

Discussion

ログインするとコメントできます