Annotation docs

Author: pomber

apps/web/content/docs/concepts/annotations.mdx

@@ -217,3 +217,9 @@ The regular expressions also support flags The two most common are `g` for globa
 You can also use [capturing groups](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Capturing_group) (see [fold example](/docs/code/fold)):
 
 <Demo name="annotations/groups" />
+
+## Using start/end comments instead of ranges
+
+Instead of counting lines for the range, you can use `!name(start)` and `!name(end)` comments to mark the block:
+
+<Demo name="annotations/start-end" />

apps/web/demos/annotations/start-end/content.md

@@ -0,0 +1,9 @@
+```js
+const lorem = ipsum == null ? 0 : 1
+// !border(start)
+dolor = lorem - sit(dolor)
+let amet = lorem ? consectetur(ipsum) : 3
+const elit = amet + dolor
+// !border(end)
+sed = elit * 2
+```

apps/web/demos/annotations/start-end/page.tsx

@@ -0,0 +1,24 @@
+import Content from "./content.md"
+import { RawCode, Pre, highlight } from "codehike/code"
+import { AnnotationHandler } from "codehike/code"
+
+export default function Page() {
+  return <Content components={{ Code }} />
+}
+
+export async function Code({ codeblock }: { codeblock: RawCode }) {
+  const highlighted = await highlight(codeblock, "github-dark")
+  return (
+    <Pre
+      className="m-0 bg-zinc-950"
+      code={highlighted}
+      handlers={[borderHandler]}
+    />
+  )
+}
+const borderHandler: AnnotationHandler = {
+  name: "border",
+  Block: ({ annotation, children }) => (
+    <div style={{ border: "1px solid red" }}>{children}</div>
+  ),
+}