---
title: "Code Block — Syntax Highlighting & Languages"
description: "Fenced code with syntax highlighting, a language picker, and copy support, plus the code and language it saves."
source: https://blokeditor.com/docs/code/
lastmod: 2026-09-07
---

Framework JavaScript

Block Tools Code

# Code block: syntax-highlighted code

A syntax-highlighted code block with a language picker, an optional line-number gutter, and a copy-to-clipboard button. Supports 30+ languages via Prism. LaTeX and Mermaid languages include a live preview tab. Pasting markdown fenced code blocks (```) or `<pre>` elements automatically creates a code block, and the language comes across whenever the pasted source names it — a fence that opens with ```sql, or a labelled code block copied out of an app such as Gemini.

### Import

TypeScript

```
import { Code } from '@bloklabs/core/tools';
```

### Save Data

TypeScript

```
interface CodeData {
  code: string;          // Raw code text (not HTML)
  language: string;      // Language identifier, e.g. "javascript", "plain text"
  lineNumbers?: boolean; // Whether to show line numbers in the gutter
}
```

JSON

```
{
  "id": "cod001",
  "type": "code",
  "data": {
    "code": "const greeting = 'hello';\nconsole.log(greeting);",
    "language": "javascript",
    "lineNumbers": true
  }
}
```

### Usage Example

TypeScript

```
import { Blok } from '@bloklabs/core';
import { Code } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    code: {
      class: Code,
      inlineToolbar: false,
    },
  },
});
```