Code block
Code block is used to display text with code formatting. It uses syntax highlighting to make code more legible.
Used for this
- To display read-only text with code formatting
- To display code snippets for users to copy
Not for this
- For editing code
- For simple, single-line usage, use the Code component
How to use it
Default
Code block renders code with syntax highlighting.
Light mode
By default, Code block is dark. Shed some light on it using isLight.
Language
Use the language prop to specify the syntax highlighting language. Default is tsx.
Line highlights
Use the highlightLines prop to call attention to particular lines of code.
Line numbers
Line numbers make it easier to reference specific lines of code. You can turn
this on with the isNumbered prop.
Size
By default, Code block text is medium-sized, but it can also be small or large.
Source diff
Use Code block to highlight source code changes.
Configuration
- Name9.0.0-next.26•View source•View on npm
- Installnpm install @zendeskgarden/react-typography
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { CodeBlock } from '@zendeskgarden/react-typography'
API
CodeBlock
Extends HTMLAttributes<HTMLPreElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
containerProps | HTMLAttributes<HTMLDivElement> | Passes props to the code block container | |
highlightLines | number[] | Determines the lines to highlight | |
isLight | boolean | Applies light mode styling | |
isNumbered | boolean | Displays line numbers | |
language | 'bash' | 'css' | 'diff' | 'graphql' | 'javascript' | 'json' | 'jsx' | 'markdown' | 'markup' | 'python' | 'typescript' | 'tsx' | 'yaml' | 'tsx' | Selects the language used by the Prism tokenizer |
size | 'small' | 'medium' | 'large' | 'medium' | Specifies the font size |