# Code Blocks

A code block is a framed, syntax-highlighted snippet with a language label and a **Copy** button. You insert one with **Add Code Block** on the editor toolbar, pick a language, and paste your code into the dialog – code blocks are not typed inline in the page body.

## Insert a code block

1.  Put the cursor where the block should go and click **Add Code Block** on the toolbar.
2.  Choose your language from the **Select Language** dropdown.
3.  Paste your code into the box under _"Insert your code below:"_.
4.  Click **Add Code**.

The block is inserted at the cursor, already highlighted. **Close** dismisses the dialog without inserting anything.

![The Add Code Block dialog over the editor with a language selected and code pasted into the text area](https://res.cloudinary.com/dstack/image/upload/v1785151203/blob_d3djy9.png)

Pick the language here rather than after inserting – it is what drives the highlighting and the label on the published block.

## Choose the language

The **Select Language** dropdown covers 24 languages:

Bash, C, C#, C++, CSS, Go, GraphQL, Java, JSON, JSONP, Javascript, LaTeX, Markdown, Markup (HTML/XML/XHTML), MATLAB, Objective-C, Perl, PHP, PL/SQL, Python, Ruby, SQL, Swift, TypeScript.

The language does two jobs. It drives the syntax colouring, and it becomes the label your readers see in the corner of the published block – which is how someone scanning a page of snippets finds the one in their language.

Pick the language before you click Add Code

Dewstack does not fall back to a sensible default. If you insert a block while the dropdown still reads _Select Language_, the published block gets a meaningless label and no highlighting. Set the dropdown first.

## Edit an existing code block

Double-click a code block in the editor. The same dialog reopens with the code already loaded and the language dropdown set to whatever the block was tagged with, and the button now reads **Edit Code**. Saving replaces the block in place.

Code blocks are not editable by clicking into them – double-clicking to open the dialog is the only way to change one. That is what stops a stray keystroke from corrupting a snippet.

## What readers get

On your published docs site, every code block is wrapped in a frame with a header bar. The header shows the language on the left and a **Copy** button on the right; clicking it copies the snippet and the button switches to **Copied** for a couple of seconds. A block with no language falls back to a generic **Code** label.

The Copy button copies the code **with its line breaks intact**, so a multi-line shell script pastes into a terminal and runs. That is worth stating because it is the failure mode of most copy buttons.

Here is how two blocks come out. A Bash block:

curl -H "Authorization: Bearer $DEWSTACK\_API\_KEY" \\
  https://docs.acme.com/api/public/v1/articles

And a JSON block:

{
  "collection": "api-reference",
  "article": "authentication",
  "status": "Publish"
}

Both render with the same chrome – only the label and the colouring differ.

## Related

[Text editor overview The toolbar, grouped by what you are trying to do.](/docs/content-editing/text-editor-overview) [Themes and dark mode What your code blocks look like when a reader switches to dark.](/docs/customize/themes)