CodeBlock

Renders a pre > code block. An optional copy button (copyable) writes the code string to the clipboard using the Clipboard API. Language is forwarded as data-ak-language for syntax-highlighting hooks.

No syntax highlighting is bundled — attach a highlighter (e.g. highlight.js, shiki, Prism) inside the CSS layer using the language attribute.

#Props

#Example

import { CodeBlock } from '@agentskit/react'

export function InlineFence({ code, lang }) {
  return <CodeBlock code={code} language={lang} copyable />
}

#data-ak-code-block

[data-ak-code-block] pre {
  overflow-x: auto;
  padding: 1rem;
  border-radius: 0.5rem;
  background: var(--ak-surface-code);
}

[data-ak-copy] {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

#Per-framework

#Related

• Markdown — parent renderer that delegates to CodeBlock for fenced blocks
• data-attributes — full data-ak-* reference
• Theming