CodeBlock. Code readers can trust, read and copy in one click.

Technical content
Interactive
Stability · Initial

::postkit-code-block

lib/postkit.tsts

import { createPostkit } from '@postkit/react'
import { article, technical } from '@postkit/react/kits'

export const postkit = createPostkit({
  kits: [article, technical],
})

Usage. Paste the code. The rest is optional.

<CodeBlock
  filename="lib/postkit.ts"
  language="ts"
  lineNumbers
  highlightLines="4"
  code={`import { createPostkit } from '@postkit/react'
import { article, technical } from '@postkit/react/kits'

export const postkit = createPostkit({
  kits: [article, technical],
})`}
/>

Highlighting comes from an adapter, not the component. Add @postkit/shiki for Shiki; it loads lazily, so pages without code don't pay for it. Long examples read better as a CodeGroup.

Props. Always in step with the code.

Prop	Type	Default	Description
codeRequired	string	None	The literal source code.
language	string	None	The syntax-language identifier.
colorScheme	"light" \| "dark"	None	The highlighting and semantic-token color scheme.
filename	string	None	The displayed filename.
highlightLines	string	None	Comma-separated line numbers or ranges.
lineNumbers	boolean	false	Whether line numbers are displayed.
copy	boolean	true	Whether the copy action is displayed.
wrap	boolean	false	Whether long lines wrap.
maxHeight	string	None	An optional maximum scrolling height.
Appearance
size	"sm" \| "md" \| "lg"	"md"	The component density and type scale.
variant	"outline" \| "subtle" \| "plain"	"subtle"	The component visual treatment.

Every component also takes unstyled and the part-styling props. Change a default for your whole site with defaults in createPostkit. Part styles

Anatomy. Every part is yours to restyle.

Each layer is one data-postkit-part, outlined where it sits. Point at a label to isolate its layer, or assemble it back into the component.

Every part

root <div>
header <div>
title
filename
language
control
actions
copyTrigger <button>
button
copyIndicator
content
scroller
code
codeText
lineContent
line <span>
lineNumber <span>

Renderers. One component, everywhere you publish.

Headless @postkit/reactSupported
Chakra @postkit/chakraSupported
Email @postkit/emailAs text
Astro @postkit/astroHydrated
Web components @postkit/elementsPlanned

Accessibility. Readable without colour, copyable without a mouse.

Copy is a real button with a label, and the Copied confirmation is announced.
Line numbers are hidden from assistive technology, so the code reads cleanly.
Long lines scroll inside the block unless wrap is on, and the scroller can be reached with the keyboard.

Edit this page on GitHub Next · CodeGroup ›