| 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 | To show a mark for a range of clicks, pass an array with the first and last click: |
| 35 | |
| 36 | ```vue |
| 37 | <span v-mark="[2, 4]"> |
| 38 | Shown from click 2 through click 3 |
| 39 | </span> |
| 40 | ``` |
| 41 | |
| 42 | The end of the range is exclusive, so the mark is hidden again when click 4 is reached. The same range can be used with the object syntax: |
| 43 | |
| 44 | ```vue |
| 45 | <span v-mark="{ at: [2, 4], type: 'circle' }"> |
| 46 | Marked temporarily |
| 47 | </span> |
| 48 | ``` |
| 49 | |
| 50 | #### Options |
| 51 | |
| 52 | Optionally, you can pass an object to `v-mark` to specify the options, for example: |
| 53 | |
| 54 | ```vue |
| 55 | <span v-mark="{ at: 5, color: '#234', type: 'circle' }"> |
| 56 | Important text |
| 57 | </span> |
| 58 | ``` |
| 59 | |
| 60 | #### Preview |
| 61 | |
| 62 | <video src="https://github.com/slidevjs/slidev/assets/11247099/c840340c-0aa1-4cde-b228-e6c67e5f6879" rounded-lg shadow controls></video> |
| 63 |