Skip to content

Rough Markers โ€‹

Slidev integrates Rough Notation to allow marking or highlighting elements in your slides.


v-mark directive โ€‹

Rough Notation integrates comes with the v-mark directive.

Type โ€‹

v-mark.underline for the underline mark, v-mark.circle for the circle mark, etc. Default to underline

Color โ€‹

v-mark.red makes the notation red. Supported built-in color themes from UnoCSS. For custom colors, use object syntax v-mark="{ color: '#234' }"

Clicks โ€‹

v-mark works like v-click and will trigger after a click. Same as v-click, it allows you to pass a custom click value, like v-mark="5" or v-mark="'+1'".

Options โ€‹

Optionally you can pass an object to v-mark to specify the options, for example:

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

Preview โ€‹

Released under the MIT License.