Code Block
Code Block is the plugin’s syntax-highlighted code display block. Use it any time you want to show a code sample, config file, or command on a page or post, with a copy button and optional line numbers built in. It works standalone, with no OpenAPI spec or WP Super Docs required.
Adding the block#
- In the WordPress block editor, click the block inserter (the + icon) and search for Code Block.
- Add it to the page.
- Paste or type your code into the text area shown in the editor.
- Open the block’s settings panel to choose the language and adjust the options below.
Settings#
| Setting | What it does |
|---|---|
| Language | Sets syntax highlighting. Covers WordPress Shortcode (for [tag attr="value"]-style examples), JavaScript, TypeScript, JSX, PHP, CSS, SCSS, HTML, JSON, Python, Bash/Shell, SQL, YAML, Ruby, Java, C, C++, C#, Go, Rust, Swift, Markdown, and plain text. Square brackets in the code are always displayed safely, regardless of language, so an example of this plugin’s own shortcode syntax can be typed with real, literal brackets: WordPress’s do_shortcode() never sees a literal [ in the page’s HTML source to misfire on, a browser still shows real brackets, and the Copy button still puts the exact, real, usable text on the clipboard. |
| Name (optional) | A filename or label shown above the code, e.g. server.js or config.yaml. Leave blank to hide it. |
| Show line numbers | Adds line numbers down the left edge of the code. |
| Allow visitors to toggle light/dark on this block | Adds a small button so a visitor can flip that one block between light and dark, independent of the rest of the page. |
| Preview height | How many lines show before the block collapses behind a View all code button, which opens the full sample in a dialog. Default is 12 lines. |
| “View All Code” Button Colors | Background and text color for the View all code button, when the block is long enough to show it. |
Every block also gets a Copy button automatically, no setting required.
Example#
A short JavaScript snippet, with Name set to hello.js, Language set to JavaScript, and Show line numbers on.
The code#
function greet( name ) {
return 'Hello, ' + name + '!';
}The shortcode#
The same block, added as a shortcode instead, for a widget, classic-editor content, or a page builder that only accepts shortcodes. The code attribute is plain text but unsafe to put in a quoted attribute (the shortcode parser stops at the first literal ] it finds, and code often contains one), so it goes between the opening and closing tags instead:
[nahnu_code_block block="code-block" language="javascript" title="hello.js" showLineNumbers="true"]
function greet( name ) {
return 'Hello, ' + name + '!';
}
[/nahnu_code_block]The block attribute picks which block to render (code-block here); everything else maps to that block’s own settings. Putting the code between the tags, rather than in a quoted attribute, avoids the shortcode’s quote and bracket problems altogether.
How it renders#
Either way renders the same output: hello.js shown as a label above the code, line numbers down the left edge, and a Copy button in the corner. Since this snippet is short, it displays in full with no “View all code” button; a longer sample would collapse behind that button once it passed the preview height.
Tips#
- The HTML language option and the Plain text / Markup option both use the same underlying highlighter, so either works for markup.
- The block only shows the View all code button and dialog once your code is longer than the preview height, so short snippets just display in full with no extra button.
- The light/dark toggle only affects that one block. It does not change the color scheme of the rest of the page.