Rough Markers

Slidev は Rough Notation を統合して、スライド内の要素にマークやハイライトを付けることができます。

Rough Notation の統合には v-mark ディレクティブが付属しています。

v-mark.underline を使うと下線マーク、v-mark.circle を使うと円マークなどが付きます（デフォルトは underline です）。

v-mark.red はマークを赤色にします。UnoCSS の組み込みカラーテーマがサポートされています。カスタムカラーを使用する場合は、オブジェクト構文 v-mark="{ color: '#234' }" を使用してください。

v-mark は v-click と同様に動作し、クリック後にトリガーされます。v-click と同様に、v-mark="5" や v-mark="'+1'" のようにカスタムクリック値を渡すことができます。

マークを複数のクリックの間で表示したい場合には、最初と最後のクリック数の配列を渡してください:

vue

<span v-mark="[2, 4]">
  マークは click 2 から click 3 まで表示されます
</span>

最後のクリック数は含まれません。つまりマークは 4 クリック目で消えます。これはオブジェクトで範囲を渡すときも同様です。

vue

<span v-mark="{ at: [2, 4], type: 'circle' }">
  一時的にマークが表示されます
</span>

オプションとして、v-mark にオブジェクトを渡してオプションを指定することもできます。例えば:

vue

<span v-mark="{ at: 5, color: '#234', type: 'circle' }">
Important text
</span>

Rough Markers ​