Code Editor

A full code editor built on CodeMirror 5. Supports multiple languages, light and dark themes, line numbers, bracket matching, and configurable tab sizes. Returns the raw code string.

Settings

Return values

The field always returns a plain text string containing the code exactly as entered.

$code = get_field('snippet');
// "function hello() {\n  console.log('Hello World');\n}"

Usage

Displaying with syntax highlighting

Use a client-side library like Prism.js or highlight.js to highlight the stored code on the frontend.

$code    = get_field('code_snippet');
$lang    = get_field('snippet_language') ?: 'javascript'; // from another field

if ($code) {
    echo '<pre><code class="language-' . esc_attr($lang) . '">';
    echo esc_html($code);
    echo '</code></pre>';
}

Storing configuration snippets

$nginx_conf = get_field('nginx_config');
if ($nginx_conf) {
    // Save to a file, pass to an API, etc.
    file_put_contents('/tmp/nginx.conf', $nginx_conf);
}

Using read-only for documentation

Enable Read Only in field settings to display reference code that editors cannot accidentally modify.

// Read-only field — displays formatted, editors cannot change it
$example = get_field('api_example');
echo '<pre class="code-block">' . esc_html($example) . '</pre>';