Skip to content
Change the site theme
Figma
(information)

Code Block

Design assets pending
Peer review pending

A component used to display readable blocks of code.


Guidelines

Guidelines page anchor

About Code Block

About Code Block page anchor

The Code Block component improves readability of embedded code samples with syntax highlighting and automatic line numbering.

Multiple Code Blocks may displayed as a tabset with the CodeBlockTabList, CodeBlockTab, and CodeBlockTabPanel components. A common use case for this is providing a code sample in multiple languages.

To ensure the Code Block is accessible:

  • Provide a descriptive label such as the current filename or step in a process to clarify the purpose of the Code Block.
  • Enable long line wrapping whenever possible for a better reading experience.
  • Use the correct heading level for the CodeBlockHeader

Use variant="single-line" for one line Code Blocks. Single line Code Blocks should not have showLineNumbers={true}.

Code Blocks have variant="multi-line" by default. Multi line Code Blocks should have a CodeBlockHeader with a logical label for the Code Block, like the language or file name.

Note for the maxLines property: Code Block uses line-clamp(link takes you to an external page) to limit the number of lines visible. When using line-clamp, browsers add an ellipsis to the contents of the Code Block to indicate that there is more to scroll to. When the code is copied with the copy button, the ellipsis isn't included.

Multiple Code Blocks may be displayed as a tabset with the CodeBlockTabList, CodeBlockTab, and CodeBlockTabPanel components. Provide a logical name for each CodeBlockTab, like the language or file name.

The Code Block Tabs components use the Tabs Primitive. For full details on the primitive and what props to provide it, follow the Tabs Primitive documentation.

Installation

Installation page anchor
yarn add @twilio-paste/code-block - or - yarn add @twilio-paste/core
import {CodeBlockWrapper, CodeBlockHeader, CodeBlock} from '@twilio-paste/core/chat-log';
const rubyCode = `#!/usr/bin/ruby
# Import the library.
require 'tk'
# Root window.
root = TkRoot.new {
title 'Push Me'
background '#111188'
}
# Add a label to the root window.
lab = TkLabel.new(root) {
text "Hey there,\nPush a button!"
background '#3333AA'
foreground '#CCCCFF'
}`;
export const Basic = () => {
return (
<CodeBlockWrapper>
<CodeBlockHeader>Build a button</CodeBlockHeader>
<CodeBlock showLineNumbers language="ruby" code={rubyCode} />
</CodeBlockWrapper>
);
};
CodeBlock
CodeBlock page anchor
PropTypeDescriptionDefault
codestringThe code snippet to be rendered.
language'javascript', 'jsx', 'csharp', 'php', 'ruby', 'python', 'java', 'json', 'c', 'bash', 'shell-session', 'go', 'groovy',The language of the code snippet.
element?stringOverrides the default element name to apply unique styles with the Customization Provider'CODE_BLOCK'
variant?'single-line', 'multi-line'Which variant of code block to render.'multi-line'
showLineNumbers?booleanInclude line numbers in code block.false
wrapLines?booleanWraps long lines of code.false
maxLines?booleanConstrains the height of code block to a set number of lines.
externalLink?stringOptional link to an external source for the code
i18nCopyLabelBefore?stringThe content of the copy button tooltip before it is clicked.'Copy code block'
i18nCopyLabelAfter?stringThe content of the copy button tooltip after the user clicks it.'Copied!'
i18nLinkLabel?stringThe content of the external link button tooltip.'Open code block in new page'
PropTypeDescriptionDefault
childrenstringThe code snippet to be rendered.
element?stringOverrides the default element name to apply unique styles with the Customization Provider'CODE_BLOCK_WRAPPER'
PropTypeDescriptionDefault
childrenstringThe code snippet to be rendered.
element?stringOverrides the default element name to apply unique styles with the Customization Provider'CODE_BLOCK_HEADER'
as?'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'label', 'span'The HTML element to render'h3'
PropTypeDescriptionDefault
childrenstringThe code snippet to be rendered.
element?stringOverrides the default element name to apply unique styles with the Customization Provider'CODE_BLOCK_TAB_LIST'
PropTypeDescriptionDefault
childrenstringThe code snippet to be rendered.
element?stringOverrides the default element name to apply unique styles with the Customization Provider'CODE_BLOCK_TAB'
PropTypeDescriptionDefault
childrenstringThe code snippet to be rendered.
element?stringOverrides the default element name to apply unique styles with the Customization Provider'CODE_BLOCK_TAB_PANEL'

Black lives matter.