improve docs

Author: reidbarber

README.md

@@ -89,27 +89,34 @@ A custom CSS selector to specify which elements to mark.
 - Type: `string`
 - Default: `"button, input, a, select, textarea"`
 
+### getLabel
+
+Provide a function for generating labels. By default, labels are generated as integers starting from 0.
+
+- Type: `(element: Element, index: number) => string`
+- Default: `(_, index) => index.toString()`
+
 ### markAttribute
 
 A custom attribute to add to the marked elements. This attribute contains the label of the mark.
 
 - Type: `string`
 - Default: `"data-mark-label"`
 
-### markStyle
-
-A CSS style to apply to the label element. You can also specify a function that returns a CSS style object.
-
-- Type: `Partial<CSSStyleDeclaration> | (element: Element) => Partial<CSSStyleDeclaration>`
-- Default: `{backgroundColor: "red", color: "white", padding: "2px 4px", fontSize: "12px", fontWeight: "bold"}`
-
 ### markPlacement
 
 The placement of the mark relative to the element.
 
 - Type: `'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'`
 - Default: `'top-start'`
 
+### markStyle
+
+A CSS style to apply to the label element. You can also specify a function that returns a CSS style object.
+
+- Type: `Partial<CSSStyleDeclaration> | (element: Element) => Partial<CSSStyleDeclaration>`
+- Default: `{backgroundColor: "red", color: "white", padding: "2px 4px", fontSize: "12px", fontWeight: "bold"}`
+
 ### boundingBoxStyle
 
 A CSS style to apply to the bounding box element. You can also specify a function that returns a CSS style object. Bounding boxes are only shown if showBoundingBoxes is true.
@@ -124,13 +131,6 @@ Whether or not to show bounding boxes around the elements.
 - Type: `boolean`
 - Default: `true`
 
-### getLabel
-
-Provide a function for generating labels. By default, labels are generated as integers starting from 0.
-
-- Type: `(element: Element, index: number) => string`
-- Default: `(_, index) => index.toString()`
-
 ### containerElement
 
 Provide a container element to query the elements to be marked. By default, the container element is document.body.

docs/pages/index.mdx

@@ -10,7 +10,7 @@ import { Logo } from "../components/Logo";
 <br />
 
 <div className="text-center">
-  Mark web pages for use with multimodal large language models
+  Mark web pages for use with vision-language models
 </div>
 
 <Demo />