CodeBlock [proxy]

API reference for the CodeBlock component

A syntax-highlighted code block powered by Prism.

CodeBlock tokenizes source code and renders each token with a color based on its type — keywords, strings, comments, functions, and more. Languages are not bundled by default. Import the Prism grammar for any language you need, and CodeBlock picks it up automatically. If a language isn't loaded, the code renders as plain text.

Prism ships with javascript, css, markup, and clike built into the core — those work without any imports.

import { CodeBlock } from 'giggles/ui';
import 'prismjs/components/prism-typescript';

function Preview() {
  const code = `const x: number = 42;`;

  return <CodeBlock language="typescript">{code}</CodeBlock>;
}

Import language grammars after any giggles/ui import so that prismjs is initialized before grammars attempt to register themselves. The formatter setup in create-giggles-app automatically handles this ordering for you.

<CodeBlock language="javascript" borderStyle={undefined}>
  {`console.log("hello");`}
</CodeBlock>

Custom token colors

<CodeBlock
  language="typescript"
  tokenColors={{ keyword: '#FF79C6', string: '#F1FA8C' }}
>
  {code}
</CodeBlock>

Diff

import 'prismjs/components/prism-diff';

const diff = `- const name = "old";
+ const name = "new";
  const x = 42;`;

<CodeBlock language="diff">{diff}</CodeBlock>

CodeBlock

CodeBlock

TokenColors

Without border

Custom token colors

Diff