Peithoに段階表示（reveal）とコード行の強調を入れた
自作プレゼンツール Peitho の話の続き。発表中にスライドの内容を段階的に見せる機能をふたつ入れた。ひとつは箇条書きなどを1ステップずつ出す「段階表示」（ PR #341 ほか）、もうひとつはコードブロックの特定の行を強調する機能（ PR #381 ）。
段階表示:
::: {reveal}
箇条書きを一気に全部見せると、聞いている側は先の項目を読み始めてしまって、話している内容と視線がずれる。よくあるやつなので、
peitho present
で1ステップずつ出せるようにした。
書き方は
::: {reveal}
で囲むだけ。
# Agenda
::: {reveal}
- Background
- Current problems
- Proposal
:::
グループの直下のブロックがそれぞれ1ステップになる。リストだけは例外で、トップレベルの項目1つが1ステップ、ネストした子項目は親と一緒に出る。グループの外に書いたものは常に見えている状態で、1枚のスライドに複数のグループを置いた場合はソース順にステップ番号が続く。
囲む対象は箇条書きに限らない。段落もコードブロックも画像も対象になるし、グループの中のブロックが別々のスロットに割り当たっても構わない（2カラムレイアウトで、テキストの後に画像を出す、みたいなことができる）。
:::
という記法は、既にPeithoにあった明示的スロット指定（
::: {slot=left}
）と同じもの。「これらのブロックはひとまとまりの並び」という構造の宣言であって、いつどう出すかはシェル側の仕事、という切り分けにしてある。
配布物には出ない
段階表示が効くのは
peitho present
だけで、
peitho preview
、PDFエクスポート、
peitho lint
、公開用の
dist/
は全部最終状態（全部見えている状態）になる。
これは実装上そうなる、というのが正しい。レンダラが吐くのは
data-reveal-step="N"
という属性だけで、それを見て何かを隠すCSSは出力に入っていない。つまり生成されたHTMLは、そのまま開けば全部見えている状態になる。発表用のシェルだけがこの属性を見て
data-reveal-hidden
をトグルし、隠す処理を行う（
display
ではなく
visibility
で隠しているので、レイアウトは動かない）。
コード行の強調
もうひとつはコードブロック。長いコードを「今この行の話をしています」と示したい、というやつ。
コードフェンスの言語タグの後ろに、波括弧で行番号を書く。
```rust {3}
pub struct Deck<Phase> {
slides: Vec<Slide>,
_phase: PhantomData<Phase>,
}
```
|
で区切ると、グループごとに1ステップになって、強調が移動していく。
```rust {2|4-6|9}
```
これで、ステップ1で2行目、ステップ2で4〜6行目、ステップ3で9行目、という具合。
実際の見た目はこんな感じ。強調されている行に背景色と左端のマーカーが付いて、それ以外の行は薄くなる。まずステップ1。
「次へ」を押すとステップ2。強調が4〜6行目に移り、さっきまで強調されていた2行目は他の行と同じように薄くなる。
グループの中では
,
で列挙、
-
で範囲を指定できるので、
{2,5-7|9}
のような書き方もできる。言語タグは省略できて、
```{1,4-5}
のようにハイライトなしのブロックにも効く。
|
が無い静的な強調は「この行が重要な行です」というコンテンツの性質なので、PDFや公開出力にも入る。
|
付きの強調は話の進行を追うポインタなので、その任意の一瞬をPDFに焼き付けても、書いた本人が主張していないことを伝えてしまう。なので配布物では強調なしになる。
参考: