Skip to contentSkip to navigationSkip to topbar
Paste
Paste assistant Assistant
FigmaStar

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

Usage

Usage page anchor
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>
  );
};

Props

Props page anchor

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

CodeBlockHeader

CodeBlockHeader page anchor

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

CodeBlockTab

CodeBlockTab page anchor

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

CodeBlockTabList

CodeBlockTabList page anchor

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"

CodeBlockTabPanel

CodeBlockTabPanel page anchor

element

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

Type
string
Default
CODE_BLOCK_TAB_PANEL

CodeBlockWrapper

CodeBlockWrapper page anchor

element

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

Type
string
Default
CODE_BLOCK_WRAPPER

state

Type
CodeBlockTabStateReturn