| 1 | --- |
| 2 | depends: |
| 3 | - guide/animations |
| 4 | relates: |
| 5 | - Rough Notation: https://github.com/slidevjs/rough-notation |
| 6 | since: v0.48.0 |
| 7 | tags: [drawing, animation] |
| 8 | description: | |
| 9 | Integrate Rough Notation to allow marking or highlighting elements in your slides. |
| 10 | --- |
| 11 | |
| 12 | # Rough Markers |
| 13 | |
| 14 | Slidev integrates [Rough Notation](https://github.com/slidevjs/rough-notation) to allow marking or highlighting elements in your slides. |
| 15 | |
| 16 | --- |
| 17 | |
| 18 | ### `v-mark` directive |
| 19 | |
| 20 | Rough Notation integration comes with the `v-mark` directive. |
| 21 | |
| 22 | #### Type |
| 23 | |
| 24 | Use `v-mark.underline` for the underline mark, `v-mark.circle` for the circle mark, etc. (defaults to `underline`). |
| 25 | |
| 26 | #### Color |
| 27 | |
| 28 | `v-mark.red` makes the notation `red`. Supported built-in color themes from UnoCSS. For custom colors, use object syntax `v-mark="{ color: '#234' }"`. |
| 29 | |
| 30 | #### Clicks |
| 31 | |
| 32 | `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'"`. |
| 33 | |
| 34 | #### Options |
| 35 | |
| 36 | Optionally, you can pass an object to `v-mark` to specify the options, for example: |
| 37 | |
| 38 | ```vue |
| 39 | <span v-mark="{ at: 5, color: '#234', type: 'circle' }"> |
| 40 | Important text |
| 41 | </span> |
| 42 | ``` |
| 43 | |
| 44 | #### Preview |
| 45 | |
| 46 | <video src="https://github.com/slidevjs/slidev/assets/11247099/c840340c-0aa1-4cde-b228-e6c67e5f6879" rounded-lg shadow controls></video> |
| 47 |