Skip to main content

Code Block

The Code Block component displays syntax-highlighted code with built-in copy and external link features.

Installation

yarn add @twilio-paste/code-block

Usage

Basic Code Block

import { CodeBlock } from '@twilio-paste/code-block';

const code = `
function hello() {
  console.log('Hello, world!');
}
`;

<CodeBlock language="javascript" code={code} />

Single Line Code Block

<CodeBlock 
  language="bash" 
  code="npm install @twilio-paste/core"
  variant="single-line"
/>

Code Block with Line Numbers

<CodeBlock 
  language="python" 
  code={pythonCode}
  showLineNumbers
/>
<CodeBlock 
  language="javascript" 
  code={code}
  externalLink="https://github.com/twilio-labs/paste"
  i18nLinkLabel="View on GitHub"
/>

Code Block Wrapper and Tabs

import { 
  CodeBlockWrapper, 
  CodeBlockTabList, 
  CodeBlockTab, 
  CodeBlockTabPanel 
} from '@twilio-paste/code-block';

<CodeBlockWrapper>
  <CodeBlockTabList>
    <CodeBlockTab>JavaScript</CodeBlockTab>
    <CodeBlockTab>Python</CodeBlockTab>
  </CodeBlockTabList>
  <CodeBlockTabPanel>
    <CodeBlock language="javascript" code={jsCode} />
  </CodeBlockTabPanel>
  <CodeBlockTabPanel>
    <CodeBlock language="python" code={pythonCode} />
  </CodeBlockTabPanel>
</CodeBlockWrapper>

Props

CodeBlock

language
SnippetLanguages
required
The language of the code snippet. Supports all languages from react-syntax-highlighter.
code
string
required
The code snippet to be rendered.
variant
'multi-line' | 'single-line'
default:"multi-line"
Variant of code block to render.
element
string
default:"CODE_BLOCK"
Overrides the default element name to apply unique styles with the Customization Provider.
showLineNumbers
boolean
Display line numbers alongside the code.
wrapLines
boolean
Enable line wrapping for long lines of code.
maxLines
number
Maximum number of lines to display before scrolling.
URL for the external link button.
i18nCopyLabelBefore
string
Label for the copy button before copying.
i18nCopyLabelAfter
string
Label for the copy button after copying.
Label for the external link button.
copyTextFormatter
(code: string) => string
Function to format the code before copying to clipboard.

Supported Languages

Code Block supports syntax highlighting for numerous languages including:
  • JavaScript/TypeScript
  • Python
  • Java
  • C/C++/C#
  • Ruby
  • Go
  • Rust
  • PHP
  • HTML/CSS
  • JSON/YAML
  • Bash/Shell
  • SQL
  • And many more…

Features

  • Syntax highlighting for 100+ languages
  • Built-in copy to clipboard functionality
  • Optional external link button
  • Line numbers support
  • Line wrapping options
  • Single-line and multi-line variants
  • Tab support for multiple code snippets
  • Dark theme optimized for Paste design system
  • Customizable i18n labels

Build docs developers (and LLMs) love