The Code block shows a colored code snippet on a page. A button copies it and, if you give it a name, another button downloads it. This page describes its settings, the highlighting of its three languages and its buttons.
Add a code snippet
- In the editor, open the inserter and choose Code. Add a block describes the ways to insert a block.
- Type or paste your code. Line breaks and indentation are kept.
- In the Settings tab, Code panel, choose the Language and, to offer the download, a File name.
| Setting | Effect | Default value |
|---|---|---|
| Language | The language of the snippet, for highlighting: Plain text, CSS, JSON or Shell. | Plain text |
| File name | The name under which the visitor downloads the snippet, for example product-card.json. When empty, the page offers no download. | Empty |
The Advanced panel contains the HTML anchor field, to point to the snippet with an address ending in #.
Highlighting
On the published page, strings, comments, keywords and numbers each get their own color. The rest keeps the text color of the block. The color is applied by the server: the snippet arrives already colored and needs no script.
| Language | Highlighted elements |
|---|---|
| CSS | Comments /* … */, strings, rules such as @media and !important, numbers with their unit (1.5rem, 50%) and hexadecimal colors (#fff). |
| JSON | Strings, keys included, true, false, null and numbers. |
| Shell | Comments # …, strings, reserved words (if, for, export…) and numbers. |
The colors follow the light or dark mode of the page. If you give the block a background, give it its dark variant with Light / Dark mode in the Colors panel.
The snippet buttons
| Button | Shown | Effect |
|---|---|---|
| Copy | Always. | Copies the code alone, without the colors, to the clipboard. The button shows a check mark for two seconds. |
| Download | When File name is filled in. | Downloads the snippet under that name. |
The buttons sit on a line above the code: they never cover the snippet. The type of the downloaded file is deduced from its extension: .css, .json, .sh, .js, .html, .xml, .svg, .md or .csv. Any other extension gives a text file.
Styles tab
The block is set in the Default, Hover and Active states. It receives the registered styles.
| Panel | Guide |
|---|---|
| Colors | Color a block |
| Typography | Style text |
| Size & Spacing, Borders, Effects, Transitions | Set size, borders and effects |
Animations tab
The Animations tab makes the snippet appear. Animate a block describes the effects.
On a phone
A line longer than the block does not widen it: the snippet scrolls sideways.
Accessibility
- Screen readers announce the copy button Copy the code. Once the copy is done, they announce Code copied., or The code could not be copied. if the browser refuses it.
- They announce the download button with the file name, for example “Download product-card.json”.
Limits
- Only CSS, JSON and shell are highlighted. Any other language is shown as plain text.
- The code is always displayed as text: a shortcode such as
is displayed as is. - The file name is a name only, without a folder.