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>
);
};
code RequiredRequired
The code snippet to be rendered
- Type
string
copyTextFormatter
- Type
(code: string) => string
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
CODE_BLOCK
externalLink
- Type
string
i18nCopyLabelAfter
- Type
string
i18nCopyLabelBefore
- Type
string
i18nLinkLabel
- Type
string
language
The language of the code snipped
- Type
any
maxLines
- Type
number
showLineNumbers
- Type
boolean
variant
Variant of code block to render
- Type
CodeBlockVariants- Default
multi-line
wrapLines
- Type
boolean
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
as
Heading level to render
- Type
any- Default
h3
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
CODE_BLOCK_HEADER
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
CODE_BLOCK_TAB
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
CODE_BLOCK_TAB_LIST
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
CODE_BLOCK_TAB_PANEL
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
CODE_BLOCK_WRAPPER
state
- Type
CodeBlockTabStateReturn
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.