bright

The Tabs component allows you to group multiple code blocks under a single tabbed interface. This is useful for showing the same logic implemented in different languages or different file versions.

To use it, wrap your code blocks within the <Tabs> component. Each code block inside the component will be treated as a separate tab. You can specify the tab title (e.g., the filename) using a comment at the top of the code block, such as // title filename.ext for JavaScript or # title filename.ext for Python.

import { Tabs } from "./tabs"

<Tabs>

```js
// title foo.js
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit
  dolor = sit - amet(dolor)
  return dolor
}

# title bar.py
def dolor_sit_amet(consectetur, adipiscing):
    if consectetur == "Lorem"
        print("Pellentesque habitant.")
    else:
        print("Suspendisse potenti.")

</Tabs>

You can customize how bright handles specific annotations by assigning an object to Code.extensions. This allows you to define custom behavior for different types of annotations (like mark, number, or title) using React components or functions that modify highlight properties.

Supported extension types include:

• Annotation types (e.g., mark): Provide a component that receives children and a query.
• Value types (e.g., number): Provide a component that receives children and the raw content.
• Lifecycle hooks (e.g., title): Provide functions like beforeHighlight to modify the properties passed to the highlighter.

import { Code } from "bright"

Code.extensions = {
  mark: {
    InlineAnnotation: ({ children, query }) => (
      <mark style={{ background: query }}>{children}</mark>
    ),
    MultilineAnnotation: ({ children, query }) => (
      <mark style={{ background: query }}>{children}</mark>
    ),
  },
  number: ({ children, content }) => (
    <input defaultValue={content} type="number" min={0} max={99} />
  ),
  title: {
    beforeHighlight: (props, query) => ({
      ...props,
      title: query,
    }),
  },
}

const myCode = `
// mark[3:10] red
console.log(1)
// mark
const x = 20
`

export default function Page() {
  return <Code lang="js">{myCode}</Code>
}

The Code component is the primary entrypoint for rendering highlighted code blocks. It supports several usage patterns, including direct props, children as strings, and MDX-style integration. It automatically handles language detection and supports annotations and extensions.

Usage Patterns:

1. Direct Props: Pass code and lang directly.

   <Code code="console.log('hello')" lang="js" />

2. Children as String: Pass the code block as children.

   <Code lang="js">console.log('hello')</Code>

3. MDX Integration: Works with standard MDX code blocks by parsing className (e.g., language-js).

   <Code>
     <code className="language-js">console.log('hello')</code>
   </Code>

4. Multiple Code Blocks (Tabs/Sub-props): You can pass multiple code elements as children to create complex structures like tabs.

Themes: By default, Code.theme is set to "dark-plus". You can provide a DoubleTheme to support light/dark mode switching via a lightSelector.