React server component
for syntax highlighting
for syntax highlighting
React server component
for syntax highlighting
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.
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 }
}
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];
}