slidev-code-blocks

Slidev のコードブロック

このスキルでは、Shiki による構文ハイライト、行のハイライト、コードグループ、外部スニペットのインポートなど、Slidev プレゼンテーションでコードを表示する方法をすべて説明します。

このスキルを使用する場面

• プレゼンテーションでコードスニペットを表示する
• 特定のコード行をハイライトする
• コードを段階的に表示する
• コードを比較して表示する
• 外部ファイルからコードをインポートする

基本的なコードブロック

シンプルなコードブロック

```javascript
function greet(name) {
  return `Hello, ${name}!`
}
```

言語の指定

Shiki は 100 種類以上の言語に対応しています。

```typescript
interface User {
  id: number
  name: string
  email: string
}
```

```python
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)
```

```rust
fn main() {
    println!("Hello, Rust!");
}
```

行番号

行番号を有効にする

```typescript {lines:true}
const x = 1
const y = 2
const z = x + y
```

グローバル設定

フロントマターで設定します。

---
lineNumbers: true
---

開始行番号

```typescript {startLine:5}
// This starts at line 5
const x = 1
```

行のハイライト

特定の行をハイライトする

```typescript {2,3}
const a = 1
const b = 2  // highlighted
const c = 3  // highlighted
const d = 4
```

範囲をハイライトする

```typescript {1-3,5}
line 1  // highlighted
line 2  // highlighted
line 3  // highlighted
line 4
line 5  // highlighted
```

クリックしてハイライトを切り替える

ハイライトを段階的に表示します。

```typescript {1|2-3|5}
const name = 'Slidev'      // Click 1
const version = '0.50'     // Click 2
const author = 'Anthony'   // Click 2

console.log(name, version) // Click 3
```

すべてをハイライトしてからフォーカスする

```typescript {*|1|2|3}
const a = 1
const b = 2
const c = 3
```

• クリック 0：すべての行を表示
• クリック 1：1 行目をハイライト
• クリック 2：2 行目をハイライト
• クリック 3：3 行目をハイライト

最終状態を指定する

```typescript {1|2|all}
const x = 1
const y = 2
```

コードブロックのオプション

最大の高さ

```typescript {maxHeight:'200px'}
// Long code block
// with many lines
// ...
```

折り返し

```typescript {wrap:true}
const veryLongLine = 'This is a very long line that would normally overflow the code block but now it wraps nicely'
```

オプションの組み合わせ

```typescript {2-4|6-8}{lines:true,startLine:10,maxHeight:'300px'}
function example() {
  const a = 1
  const b = 2
  const c = 3

  return {
    sum: a + b + c
  }
}
```

コードテーマ

setup/shiki.ts で設定する

// setup/shiki.ts
import { defineShikiSetup } from '@slidev/types'

export default defineShikiSetup(() => {
  return {
    themes: {
      dark: 'vitesse-dark',
      light: 'vitesse-light',
    },
  }
})

人気のテーマ

• vitesse-dark / vitesse-light
• dracula
• one-dark-pro
• nord
• material-theme
• github-dark / github-light

コードグループ

複数のコードバリエーションをタブで表示します。

```typescript {monaco}
// TypeScript version
interface User {
  name: string
}
```

```javascript
// JavaScript version
const user = {
  name: 'John'
}
```

<<< を使用して、タブ付きのコードグループを作成します（試験的機能）。

<<< @/snippets/example.ts
<<< @/snippets/example.js

外部コードのインポート

ファイル全体をインポートする

<<< @/snippets/example.ts

行範囲を指定する

<<< @/snippets/example.ts#L5-10

言語を上書きする

<<< @/snippets/config{json}

ハイライトを指定する

<<< @/snippets/example.ts {2,4}

差分のハイライト

コードの変更を表示します。

```typescript
function greet(name: string) {
  return `Hello, ${name}!` // [!code --]
  return `Hi, ${name}!`    // [!code ++]
}
```

特定の変更をハイライトする

```typescript
const config = {
  theme: 'dark',   // [!code highlight]
  debug: false,    // [!code warning]
  timeout: 1000,   // [!code error]
}
```

TwoSlash 連携

TypeScript のホバー情報：

```typescript twoslash
const message = 'Hello'
//    ^?
```

ホバー注釈：

```typescript twoslash
interface User {
  name: string
  age: number
}

const user: User = {
  name: 'John',
  age: 30
}
//    ^?
```

コードのフォーカス

フォーカスモード

ハイライトされていない行を暗く表示します。

```typescript {2}{focus}
const a = 1
const b = 2  // Focused, others dimmed
const c = 3
```

クリックによるフォーカスの切り替え

```typescript {1|2|3}{focus}
step1()  // First focused
step2()  // Then this
step3()  // Finally this
```

インラインコード

シンプルなインラインコード

Use the `useState` hook for state management.

スタイル付きインラインコード

The function returns `true`{.text-green-500} or `false`{.text-red-500}.

コードブロックのスタイル設定

カスタム CSS クラス

```typescript {class:'my-code'}
const x = 1
```

.my-code {
  font-size: 0.9em;
  border-radius: 8px;
}

スコープ付きスタイル

# Code Slide

```js
const x = 1

.slidev-code { font-size: 1.2em; }

## Best Practices

### 1. Keep Code Concise

❌ **Too much code**
````markdown
```typescript
// Full 100-line file

✓ **Focused snippet**
````markdown
```typescript
// Just the relevant function
function handleClick() {
  setState(value => value + 1)
}
```

2. 意味のあるハイライトを使用する

❌ 文脈がない

```typescript
const x = 1
```

✓ 注目点を示す

```typescript {2}
const x = 1
const important = 'focus here'  // highlighted
const y = 2
```

3. 複雑なコードを段階的に表示する

```typescript {1-2|4-6|8-10}
// Step 1: Define types
interface User { name: string }

// Step 2: Create function
function greet(user: User) {
  return `Hello, ${user.name}`
}

// Step 3: Usage
const greeting = greet({ name: 'World' })
console.log(greeting)
```

4. コメントで文脈を示す

```typescript
// BAD: Magic numbers
const delay = 1000

// GOOD: Named constants
const ANIMATION_DELAY_MS = 1000
```

よく使われるパターン

変更前／変更後の比較

```typescript
// Before
function add(a, b) {
  return a + b
}

// After
const add = (a: number, b: number): number => a + b
```

ステップごとのチュートリアル

```typescript {1|1-4|1-7|1-10}
// Step 1: Import
import { ref } from 'vue'

// Step 2: Create ref
const count = ref(0)

// Step 3: Create function
function increment() {
  count.value++
}
```

出力形式

コードスライドを作成するときは、次の内容を提示します。

---
layout: default
---

# [Topic]

[Brief explanation of what the code does]

```[language] {[highlights]}{[options]}
[code]

**KEY DECISIONS:**
- Language: [chosen language]
- Highlighting: [which lines and why]
- Animation: [click sequence if any]
- Theme: [if non-default]