Code block
Code block is used to display text with code formatting. It uses syntax highlighting to make code more legible.
- To display read-only text with code formatting
- To display code snippets for users to copy
- For editing code
- For simple, single-line usage, use the Code component
How to use it
Default
Code block renders code with syntax highlighting.
/**
* Copy the given value to the clipboard.
*
* @param {string} value The value to copy
*/
const copy = (value: string) => {
const element = document.createElement('textarea');
element.readOnly = true;
element.style.position = 'absolute';
element.style.left = '-9999px';
document.body.appendChild(element);
element.value = value;
element.select();
document.execCommand('copy');
element.remove();
};
Light mode
By default, Code block is dark. Shed some light on it using isLight
.
/**
* Copy the given value to the clipboard.
*
* @param {string} value The value to copy
*/
const copy = (value: string) => {
const element = document.createElement('textarea');
element.readOnly = true;
element.style.position = 'absolute';
element.style.left = '-9999px';
document.body.appendChild(element);
element.value = value;
element.select();
document.execCommand('copy');
element.remove();
};
Language
Use the language
prop to specify the syntax highlighting language. Default is tsx
.
/* CSS utility for making hidden content accessible to screen readers */
.sr-only {
position: absolute;
margin: -1px;
border-width: 0;
clip: rect(0, 0, 0, 0);
padding: 0;
width: 1px;
height: 1px;
overflow: hidden;
white-space: nowrap;
}
Line highlights
Use the highlightLines
prop to call attention to particular lines of code.
{
"active": true,
"brand_url": "https://garden.zendesk.com",
"created_at": "2014-05-28T12:27:71Z",
"description": "Garden is the design system by Zendesk",
"logo": {
"content_type": "image/png",
"content_url": "https://garden.zendesk.com/og-image.png",
"file_name": "og-image.png",
"size": 29515
},
"name": "Zendesk Garden",
"subdomain": "garden",
"updated_at": "2021-02-11T12:27:71Z",
"url": "https://garden.zendesk.com/page-data/app-data.json"
}
{
"active": true,
"brand_url": "https://garden.zendesk.com",
"created_at": "2014-05-28T12:27:71Z",
"description": "Garden is the design system by Zendesk",
"logo": {
"content_type": "image/png",
"content_url": "https://garden.zendesk.com/og-image.png",
"file_name": "og-image.png",
"size": 29515
},
"name": "Zendesk Garden",
"subdomain": "garden",
"updated_at": "2021-02-11T12:27:71Z",
"url": "https://garden.zendesk.com/page-data/app-data.json"
}
Line numbers
Line numbers make it easier to reference specific lines of code. You can turn
this on with the isNumbered
prop.
import React from 'react';
import styled from 'styled-components';
import { Grid } from '@zendeskgarden/react-grid';
import { mediaQuery } from '@zendeskgarden/react-theming';
import { Field, Label, Input, Message } from '@zendeskgarden/react-forms';
const StyledCol = styled(Grid.Col)`
${p => mediaQuery('down', 'xs', p.theme)} {
margin-top: ${p => p.theme.space.sm};
}
`;
const Example = () => (
<Grid.Row>
<Grid.Col sm={4}>
<Field>
<Label>Plant</Label>
<Input validation="success" />
<Message validation="success">A cactus is a beautiful plant</Message>
</Field>
</Grid.Col>
<StyledCol sm={4}>
<Field>
<Label>Plant</Label>
<Input validation="warning" />
<Message validation="warning">A cactus has thorns</Message>
</Field>
</StyledCol>
<StyledCol sm={4}>
<Field>
<Label>Plant</Label>
<Input validation="error" />
<Message validation="error">A cactus belongs in the desert</Message>
</Field>
</StyledCol>
</Grid.Row>
);
export default Example;
Size
By default, Code block text is medium-sized, but it can also be small or large.
const perrenial = ' Daylily (Hemerocallis) ';
console.log(`🌱 ${perrenial.trim()} 🌱`);
const perrenial = ' Daylily (Hemerocallis) ';
console.log(`🌱 ${perrenial.trim()} 🌱`);
const perrenial = ' Daylily (Hemerocallis) ';
console.log(`🌱 ${perrenial.trim()} 🌱`);
Source diff
Use Code block to highlight source code changes.
@@ -1,18 +1,20 @@
+# A Garden of Roses
+
Roses are red,
Violets are blue,
Sugar is sweet,
And so are you.
***
Roses are red,
-Violets are blue,
-I’m unoriginal,
-This is all I can do.
+My screen is blue,
+The system crashed,
+do {} while (true)
***
Roses are red,
Violets are blue,
-Actually kind of purple,
-Maybe more of a [royal-M400](https://garden.zendesk.com/design/color)?
+TL;DR,
+They differ in hue.
Configuration
- Name9.5.1•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 |