# Code

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

1. In the editor, open the inserter and choose **Code**. [Add a block](https://lovelyrender.com/documentation/add-block/) describes the ways to insert a block.
2. Type or paste your code. Line breaks and indentation are kept.
3. 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 inspector of a Code block: the Code panel with Language set to CSS and its help text, then File name filled in with card.css.](https://static.lovelyrender.com/uploads/2026/10/898-doc-blocs-code.png)

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.

**Note:** A snippet in which you formatted a passage (a bold word or a link) is not highlighted. Your formatting is kept as it is.

## 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.

**Tip:** For a block ready to import, set the **Language** to **JSON** and name the file, for example `product-card.json`. For a command to run, set **Shell** with no file name: the reader only has the copy button.

## Styles tab

The block is set in the **Default**, **Hover** and **Active** states. It receives the registered styles.

| Panel | Guide |
| --- | --- |
| **Colors** | [Color a block](https://lovelyrender.com/documentation/color-block/) |
| **Typography** | [Style text](https://lovelyrender.com/documentation/format-text/) |
| **Size & Spacing**, **Borders**, **Effects**, **Transitions** | [Set size, borders and effects](https://lovelyrender.com/documentation/size-borders-effects/) |

## Animations tab

The **Animations** tab makes the snippet appear. [Animate a block](https://lovelyrender.com/documentation/animate-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.

## See also

- [Text](https://lovelyrender.com/documentation/text-block/)
- [Color a block](https://lovelyrender.com/documentation/color-block/)
- [Add advanced CSS](https://lovelyrender.com/documentation/add-advanced-css/)