highlight -> lineHighlights

.changeset/violet-clouds-sort.md

@@ -0,0 +1,7 @@
+---
+'mdxts': minor
+---
+
+### Breaking Changes
+
+The `CodeBlock` `highlight` prop has been renamed to `lineHighlights` to better match the `LineHighlights` component nomenclature.

examples/blog/posts/build-a-dialog-component-in-react.mdx

@@ -26,7 +26,7 @@ function Modal({ children }) {
 
 Next, we need a way to control the open and closed state of the `dialog`. We can call either the [`show`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/show) or [`showModal`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal) methods depending on how we want our dialog to behave. For today, we will only be needing `showModal` since this adds a backdrop and traps focus for us:
 
-```tsx highlight="6-13"
+```tsx lineHighlights="6-13"
 import React from 'react'
 
 function Modal({ children, open }) {
@@ -47,7 +47,7 @@ function Modal({ children, open }) {
 
 This covers opening and closing our `Modal` component using a prop, but there are other ways of closing a `dialog` -- like pressing the `Escape` key. We can listen to the [`cancel`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/cancel_event) event to catch this and provide users of our component a way to update the `open` prop:
 
-```tsx highlight="15-25"
+```tsx lineHighlights="15-25"
 import React from 'react'
 
 function Modal({ children, open, onRequestClose }) {
@@ -80,7 +80,7 @@ function Modal({ children, open, onRequestClose }) {
 
 One last thing we should add is returning focus to the element that opened our `Modal` when it is closed. This functionality is suggested from [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-7). However, it is not part of the dialog spec so we need to implement it ourselves:
 
-```tsx highlight="5,10,14"
+```tsx lineHighlights="5,10,14"
 import React from 'react'
 
 function Modal({ children, open, onRequestClose }) {

packages/mdxts/src/components/CodeBlock/CodeBlock.examples.tsx

@@ -28,7 +28,7 @@ export function LineNumbering() {
       filename="line-numbers.ts"
       value={`const a = 1;\nconst b = 2;\n\nconst add = a + b\nconst subtract = a - b`}
       lineNumbers
-      highlight="4"
+      lineHighlights="4"
     />
   )
 }
@@ -38,7 +38,7 @@ export function LineHighlighting() {
     <CodeBlock
       filename="line-highlights.ts"
       value={`const a = 1;\nconst b = 2;\n\nconst add = a + b\nconst subtract = a - b`}
-      highlight="1-2, 4"
+      lineHighlights="1-2, 4"
     />
   )
 }

packages/mdxts/src/components/CodeBlock/CodeBlock.tsx

@@ -22,7 +22,7 @@ export type BaseCodeBlockProps = {
   lineNumbers?: boolean
 
   /** A string of comma separated lines and ranges to highlight. */
-  highlight?: string
+  lineHighlights?: string
 
   /** Whether or not to show the toolbar. */
   toolbar?: boolean
@@ -75,7 +75,7 @@ export async function CodeBlock({
   filename,
   language,
   lineNumbers,
-  highlight,
+  lineHighlights,
   toolbar,
   allowCopy,
   allowErrors,
@@ -112,7 +112,7 @@ export async function CodeBlock({
       ? getSourcePath(sourcePath, sourcePathLine, sourcePathColumn)
       : undefined,
     tokens,
-    highlight,
+    highlight: lineHighlights,
     padding,
   }
 
@@ -154,11 +154,11 @@ export async function CodeBlock({
             shouldRenderToolbar ? undefined : props.className?.container
           }
           style={{
-            display: lineNumbers || highlight ? 'grid' : undefined,
+            display: lineNumbers || lineHighlights ? 'grid' : undefined,
             gridTemplateColumns:
-              lineNumbers || highlight ? 'auto 1fr' : undefined,
+              lineNumbers || lineHighlights ? 'auto 1fr' : undefined,
             gridTemplateRows:
-              lineNumbers || highlight
+              lineNumbers || lineHighlights
                 ? `repeat(${tokens.length}, 1lh)`
                 : undefined,
             lineHeight: 1.4,
@@ -196,7 +196,7 @@ export async function CodeBlock({
               }}
             />
           ) : null}
-          {lineNumbers || highlight ? (
+          {lineNumbers || lineHighlights ? (
             <div
               style={{
                 gridRow: '1 / -1',
@@ -208,7 +208,7 @@ export async function CodeBlock({
           ) : (
             <Tokens />
           )}
-          {highlight ? (
+          {lineHighlights ? (
             <LineHighlights
               style={{
                 margin: lineNumbers

packages/mdxts/src/components/MDXComponents.tsx

@@ -28,7 +28,7 @@ export const MDXComponents = {
       allowCopy,
       allowErrors,
       lineNumbers,
-      highlight,
+      lineHighlights,
       toolbar,
       filename,
       className,
@@ -52,7 +52,7 @@ export const MDXComponents = {
         allowCopy={allowCopy}
         allowErrors={allowErrors}
         lineNumbers={lineNumbers}
-        highlight={highlight}
+        lineHighlights={lineHighlights}
         toolbar={toolbar}
         filename={filename}
         language={metadata?.language}

site/docs/02.routing.mdx

@@ -76,7 +76,7 @@ When targeting JavaScript or TypeScript files, a few heuristics are used to infe
 
 Use the `paths` method for a source to generate static routes:
 
-```tsx filename="app/blog/[slug]/02.page.tsx" highlight="5-7"
+```tsx filename="app/blog/[slug]/02.page.tsx" lineHighlights="5-7"
 import { createSource } from 'mdxts'
 
 const allDocs = createSource('docs/**/*.mdx')

site/docs/04.examples/01.authoring.mdx

@@ -44,7 +44,7 @@ Button/
 
 Export a default component to enhance examples with additional behavior, rendering, or to provide a consistent layout for all examples in the file:
 
-```tsx allowErrors highlight="4-6"
+```tsx allowErrors lineHighlights="4-6"
 import { Button } from './Button'
 import { Theme } from './Theme'
 
@@ -74,7 +74,7 @@ Refer to the next section on [rendering](./02.rendering.mdx) to learn how to use
 
 Metadata is auto-generated based on the example's function name and its accompanying comment. Use `export default` to provide additional metadata for the file:
 
-```tsx allowErrors highlight="3-4,12-13,17-18"
+```tsx allowErrors lineHighlights="3-4,12-13,17-18"
 import { Button } from './Button'
 
 /** A collection of examples for the button component. */