Design

Color

Callout

💡

Sphinx of black quartz, judge my vow.

Info

ℹ️

Sphinx of black quartz, judge my vow.

Warning

⚠️

Sphinx of black quartz, judge my vow.

Error

🚫

Sphinx of black quartz, judge my vow.

Custom icon

🤪

Sphinx of black quartz, judge my vow.

Inline code

const fn = () => console.log('Hello world!')const fn = () => console.log('Hello world!')

Code block

Basic

const MyComponent = () => {
  const [mounted, setMounted] = React.useState(false)
 
  React.useEffect(() => setMounted(true), [])
 
  if (!mounted) return 'Loading ...'
 
  return <div> ... </div>
}
 
export default MyComponent

const MyComponent = () => {
  const [mounted, setMounted] = React.useState(false)
 
  React.useEffect(() => setMounted(true), [])
 
  if (!mounted) return 'Loading ...'
 
  return <div> ... </div>
}
 
export default MyComponent

With line numbers, line and word highlighting

const MyComponent = () => {
  const [mounted, setMounted] = React.useState(false)
 
  React.useEffect(() => setMounted(true), [])
 
  if (!mounted) return 'Loading ...'
 
  return <div> ... </div>
}
 
export default MyComponent

const MyComponent = () => {
  const [mounted, setMounted] = React.useState(false)
 
  React.useEffect(() => setMounted(true), [])
 
  if (!mounted) return 'Loading ...'
 
  return <div> ... </div>
}
 
export default MyComponent

With title

app/components/MyComponent.tsx

const MyComponent = () => {
  const [mounted, setMounted] = React.useState(false)
 
  React.useEffect(() => setMounted(true), [])
 
  if (!mounted) return 'Loading ...'
 
  return <div> ... </div>
}
 
export default MyComponent

app/components/MyComponent.tsx

const MyComponent = () => {
  const [mounted, setMounted] = React.useState(false)
 
  React.useEffect(() => setMounted(true), [])
 
  if (!mounted) return 'Loading ...'
 
  return <div> ... </div>
}
 
export default MyComponent

Tree

app

layout.tsx

not-found.tsx

page.tsx

providers.tsx

config

colors.ts

giscus.ts

site.ts

hooks

useFormattedDate.ts

useHeadings.ts

useScrollspy.ts