Bright - Syntax Highlighting React Server Component

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.

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.

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
// with https://themes.codehike.org/editor
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
// with https://themes.codehike.org/editor
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 }
}

shine.js

shine.py

shine.graphql

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