feat: animations for code highlights

Author: antfu

guide/syntax.md

@@ -72,6 +72,34 @@ console.log('HelloWorld')
 ```
 ~~~
 
+To highlight specific lines, simply add line numbers within bracket `{}`. Line numbers start count from 1.
+
+~~~md
+```ts {2,3}
+function add(
+  a: Ref<number> | number,
+  b: Ref<number> | number
+) {
+  return computed(() => unref(a) + unref(b))
+}
+```
+~~~
+
+To change the highlight in multiple steps, you can use `|` to separate them. For example
+
+~~~md
+```ts {2-3|5|all}
+function add(
+  a: Ref<number> | number,
+  b: Ref<number> | number
+) {
+  return computed(() => unref(a) + unref(b))
+}
+```
+~~~
+
+This will highlight on `a` and `b` first, then goes to the `computed` line after one click, and then, the whole block. Learn more about the [clicks animations here](/guide/animations).
+
 Whenever you want to do some modification in the presentation, simply add `{monaco}` after the language id, it turns the block into a full-featured Monaco editor!
 
 ~~~md