React server component
for syntax highlighting
React server component
for syntax highlighting
app/page.js
import { Code } from "bright"

export default function Page() {
  return (
    <Code lang="py">print("hello brightness")</Code>
  )
}
app/page.js
import { Code } from "bright"

export default function Page() {
  return (
    <Code lang="py">print("hello brightness")</Code>
  )
}
print("hello brightness")
  • Runs on the server. No impact on bundle-size.
  • No extra configs. Install it, import it, and use it.
  • VS Code's syntax highlighting. All the themes.
  • Super flexible.Extend it as much as you want.
TwitterGitHubDiscord
  • Runs on the server. No impact on bundle-size.
  • No extra configs. Install it, import it, and use it.
  • VS Code's syntax highlighting. All the themes.
  • Super flexible.Extend it as much as you want.
TwitterGitHubDiscord

Title

app/page.js
import { Code } from "bright"

const myCode = `
let hello = "hello brightness"
console.log(hello, "my old friend")
`.trim()

export default function Page() {
  return (
    <Code lang="js" title="shiny.js">{myCode}</Code>
  )
}
app/page.js
import { Code } from "bright"

const myCode = `
let hello = "hello brightness"
console.log(hello, "my old friend")
`.trim()

export default function Page() {
  return (
    <Code lang="js" title="shiny.js">{myCode}</Code>
  )
}
shiny.js
let hello = "hello brightness"
console.log(hello, "my old friend")

Line Numbers

app/page.js
import { Code } from "bright"

const myCode = `
let hello = "hello brightness"
console.log(hello, "my old friend")
`.trim()

export default function Page() {
  return (
    <Code lang="js" lineNumbers>{myCode}</Code>
  )
}
app/page.js
import { Code } from "bright"

const myCode = `
let hello = "hello brightness"
console.log(hello, "my old friend")
`.trim()

export default function Page() {
  return (
    <Code lang="js" lineNumbers>{myCode}</Code>
  )
}
1let hello = "hello brightness"
2console.log(hello, "my old friend")

Global Props

app/page.js
import { Code } from "bright"

const myCode = `
let hello = "hello brightness"
console.log(hello, "my old friend")
`.trim()

// set any prop globally
Code.lineNumbers = true

export default function Page() {
  return (
    <Code lang="js">{myCode}</Code>
  )
}
app/page.js
import { Code } from "bright"

const myCode = `
let hello = "hello brightness"
console.log(hello, "my old friend")
`.trim()

// set any prop globally
Code.lineNumbers = true

export default function Page() {
  return (
    <Code lang="js">{myCode}</Code>
  )
}
1let hello = "hello brightness"
2console.log(hello, "my old friend")

Theme

app/page.js
import { Code } from "bright"

const myCode = `
theFuture, bright = 10, 10
print(theFuture is bright)
`.trim()

// there are several themes built in
// typescript should autocomplete the options
Code.theme = "github-light"

export default function Page() {
  return (
    <Code lang="py">{myCode}</Code>
  )
}
app/page.js
import { Code } from "bright"

const myCode = `
theFuture, bright = 10, 10
print(theFuture is bright)
`.trim()

// there are several themes built in
// typescript should autocomplete the options
Code.theme = "github-light"

export default function Page() {
  return (
    <Code lang="py">{myCode}</Code>
  )
}
theFuture, bright = 10, 10
print(theFuture is bright)

Dark Mode

app/page.js
import { Code } from "bright"

const myCode = `
theFuture, bright = 10, 10
print(theFuture is bright)
`.trim()

Code.theme = {
  dark: "github-dark",
  light: "github-light",
  // using a different CSS selector:
  // lightSelector: '[data-theme="light"]',
  // lightSelector: 'html.light',
}

export default function Page() {
  return (
    <>
      <div data-theme="dark">
        <Code lang="py">{myCode}</Code>
      </div>
      <div data-theme="light">
        <Code lang="py">{myCode}</Code>
      </div>
    </>
  )
}
app/page.js
import { Code } from "bright"

const myCode = `
theFuture, bright = 10, 10
print(theFuture is bright)
`.trim()

Code.theme = {
  dark: "github-dark",
  light: "github-light",
  // using a different CSS selector:
  // lightSelector: '[data-theme="light"]',
  // lightSelector: 'html.light',
}

export default function Page() {
  return (
    <>
      <div data-theme="dark">
        <Code lang="py">{myCode}</Code>
      </div>
      <div data-theme="light">
        <Code lang="py">{myCode}</Code>
      </div>
    </>
  )
}
theFuture, bright = 10, 10
print(theFuture is bright)
theFuture, bright = 10, 10
print(theFuture is bright)
theFuture, bright = 10, 10
print(theFuture is bright)
theFuture, bright = 10, 10
print(theFuture is bright)

Custom Theme

app/page.js
import { Code } from "bright"

// you can make your own theme
// or extend any VS Code theme
import myTheme from "./my-theme.json"

Code.theme = myTheme

const myCode = `
theFuture, bright = 10, 10
print(theFuture is bright)
`.trim()

export default function Page() {
  return (
    <Code lang="py">{myCode}</Code>
  )
}
app/page.js
import { Code } from "bright"

// you can make your own theme
// or extend any VS Code theme
import myTheme from "./my-theme.json"

Code.theme = myTheme

const myCode = `
theFuture, bright = 10, 10
print(theFuture is bright)
`.trim()

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

Markdown / MDX

mdx-components.js
import { Code } from "bright"

// You need this file to use MDX in server components
// Learn more from the Next.js docs

export function useMDXComponents(components) {
  return { ...components, pre: Code }
}
mdx-components.js
import { Code } from "bright"

// You need this file to use MDX in server components
// Learn more from the Next.js docs

export function useMDXComponents(components) {
  return { ...components, pre: Code }
}

Titles in Markdown

app/page.mdx
# Hello

This is how you add the code's title in Markdown/MDX 

```web/shine.js
let hello = "hello brightness"
console.log(hello, "my old friend")
```

app/page.mdx
# Hello

This is how you add the code's title in Markdown/MDX 

```web/shine.js
let hello = "hello brightness"
console.log(hello, "my old friend")
```

web/shine.js
let hello = "hello brightness"
console.log(hello, "my old friend")

Customization

mdx-components.js
import { Code } from "bright"
import { 
  tabs, 
  fileIcons, 
  focus 
} from "./my-extensions"

// use extensions to customize anything
Code.extensions = [
  tabs, 
  fileIcons, 
  focus
]
// see recipes for common use cases and inspiration

export function useMDXComponents(components) {
  return { ...components, pre: Code }
}
mdx-components.js
import { Code } from "bright"
import { 
  tabs, 
  fileIcons, 
  focus 
} from "./my-extensions"

// use extensions to customize anything
Code.extensions = [
  tabs, 
  fileIcons, 
  focus
]
// see recipes for common use cases and inspiration

export function useMDXComponents(components) {
  return { ...components, pre: Code }
}
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return dolor;
}

function consectetur(...adipiscing) {
  const elit = adipiscing[0];
  return sed.eiusmod(elit) ? elit : [elit];
}