Skip to contentSkip to navigationSkip to topbar
Paste assistant Assistant
Figma
Star

Code Block

Version 4.1.0GithubStorybookPeer review pending

A Code Block is a component used to display readable blocks of code.

Installation

Installation page anchor
yarn add @twilio-paste/code-block - or - yarn add @twilio-paste/core
import {CodeBlockWrapper, CodeBlockHeader, CodeBlock} from '@twilio-paste/core/code-block';

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

code RequiredRequired

The code snippet to be rendered

Type
string

language RequiredRequired

The language of the code snipped

Type
SnippetLanguages

copyTextFormatter

Type
(code: string) => string

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
CODE_BLOCK

externalLink

Type
string

i18nCopyLabelAfter

Type
string

i18nCopyLabelBefore

Type
string

i18nLinkLabel

Type
string

maxLines

Type
number

showLineNumbers

Type
boolean

variant

Variant of code block to render

Type
CodeBlockVariants
Default
multi-line

wrapLines

Type
boolean

as

Heading level to render

Type
AsTags
Default
h3

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
CODE_BLOCK_HEADER

aria-disabled

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

Type
Booleanish

disabled

Same as HTML attribute.

Type
boolean

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
CODE_BLOCK_TAB

focusable

When an element is disabled, it may still be focusable. It works similarly to readOnly on form elements. In this case, only aria-disabled will be set.

Type
boolean

id

Same as the HTML attribute.

Type
string

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
CODE_BLOCK_TAB_LIST

variant

Changes each Tab to either equally fit the width of the containing element or hug the contents of its label.

Type
| "fitted" | "inverse" | "inverse_fitted" | "full_width" | "inverse_full_width"

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
CODE_BLOCK_TAB_PANEL

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
CODE_BLOCK_WRAPPER

state

Type
CodeBlockTabStateReturn