---
title: "Code Editor"
description: "Add Code Editor control with syntax highlighting to your custom blocks for WordPress using the Lazy Blocks plugin."
url: "https://www.lazyblocks.com/docs/blocks-controls/code-editor/"
lastUpdated: 2026-09-09
source: "blocks-controls/code-editor.mdx"
---
# Code Editor

Code editor control lets you add and edit code snippets with syntax highlighting support.

## Control Settings

- **Language**  (`language`) - the syntax to highlight, picked from a fixed list of 36 that runs from Arduino to YAML

No language is picked to start with, and the editor highlights nothing until you pick one. The setting changes the editor alone, so the front end gets the text exactly as it was typed whichever language is set. Without Pro the control is a plain textarea with no highlighting and no Language row.

## Usage

```php title="PHP" /$attributes['control_name']/
<div>
  <?php echo $attributes['control_name']; ?>
</div>
```

```php title="PHP Preformatted" /$attributes['control_name']/
<pre>
  <?php echo esc_html( $attributes['control_name'] ); ?>
</pre>
```

```hbs title="Handlebars" /{{{control_name}}}/
<div>
  {{{control_name}}}
</div>
```

```hbs title="Handlebars Preformatted" /{{control_name}}/
<pre>
  {{control_name}}
</pre>
```

```php title="Post Meta" /get_lzb_meta( 'control_meta_name' )/
<div>
  <?php echo get_lzb_meta( 'control_meta_name' ); ?>
</div>
```

The value is stored and returned as plain text, so print it through `esc_html()` inside a `<pre>` when you want the code shown rather than run by the browser.

## Documentation Index
> Fetch the complete documentation index at: https://www.lazyblocks.com/llms.txt
> Fetch every page in a single file at: https://www.lazyblocks.com/llms-full.txt