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
If you want to build rich content websites
with more than just syntax highlighting:
try Code Hike
If you want to build rich content websites
with more than just syntax highlighting:
try Code Hike

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];
}