Title: Nahnu Code & API Block
Author: Jaime Alnassim
Published: Ọwẹ́wẹ̀ 16, 2026
Last modified: Ọwẹ́wẹ̀ 20, 2026
---
Ṣàwárí àwọn plugin
# Nahnu Code & API Block
Láti ọwọ́ [Jaime Alnassim](https://profiles.wordpress.org/ja1me4/)
[Ṣe ìgbàsílẹ̀](https://downloads.wordpress.org/plugin/nahnu-code-block.1.0.2.zip)
* [Àwọn àlàyé](https://yor.wordpress.org/plugins/nahnu-code-block/#description)
* [Àwọn àgbéyẹ̀wò](https://yor.wordpress.org/plugins/nahnu-code-block/#reviews)
* [Ìgbéwọlẹ̀](https://yor.wordpress.org/plugins/nahnu-code-block/#installation)
* [Ìdàgbàsókè](https://yor.wordpress.org/plugins/nahnu-code-block/#developers)
[Ìrànlọ́wọ́](https://wordpress.org/support/plugin/nahnu-code-block/)
## Àpèjúwe
Nahnu Code & API Block gives the block editor everything a developer-facing site
needs to document code and APIs: a polished syntax-highlighted code block, and a
matching family of blocks purpose-built for API reference pages — endpoints, parameter
tables, tabbed request/response examples, status code tables, authentication headers,
and a live try-it console.
**The code block**
* Syntax highlighting for 20+ languages, powered by Prism.js and bundled with the
plugin (no external CDN requests).
* Automatic light/dark mode: follows the visitorÌtumọ̀ Yorùbá: ’s OS preference,
and can also follow a dark-mode class or attribute your theme or another plugin
already sets on `` or `` (filterable).
* An optional per-block toggle button so visitors can flip a single code block
between light and dark themes manually.
* Long snippets collapse to a configurable preview height with a “View all code”
button that opens the complete snippet in a modal.
* One-click Copy button, optional line numbers.
**The API-documentation blocks**
* **Endpoint** — HTTP method badge, path, a short summary plus an optional longer
description, version badge, an optional deprecation notice, an “Auth Required”
indicator, an “Operation ID” for a stable deep-link anchor, a “See also” list
of related endpoints, and a copy-link icon for deep-linking directly to this
endpoint.
* **Parameters** — a name / type / location (query, path, header, cookie, body)/
format / default value / example value / allowed values / validation range and
pattern / nullable / read-only or write-only / required-optional / deprecated/
description table, with support for nested object parameters (e.g. an `address`
parameter with its own `line1`, `city`, etc.), linkable type references (e.g.“
array of **ProgramResponseDto**” linking to another Parameters block set up as
that named schema), and a copy-link icon on each row for deep-linking to a specific
parameter.
* **Request / Response** — tabbed code examples per language (cURL, JavaScript,
Python, PHP, and more), each with Request and Response sub-tabs. Language selection
is synced and remembered across every Request/Response block on the same page.
* **Response Body** — a “Returns” description, optional response headers shown
as a persistent table, and one or more real response bodies grouped by status
code, shown as an expandable accordion with syntax highlighting and its own copy
button per response. An optional “Show Schema” toggle switches a response between
its real example and a lightweight type-shape table. Complements the Status Codes
block: Status Codes is the quick-scan summary table, Response Body is the rich
single-response view.
* **Status Codes** — a table of the HTTP status codes your API returns, color-coded
by class (2xx/3xx/4xx/5xx), with an optional collapsible example response body.
* **Authentication** — shows the exact header a client needs to send (Bearer token,
API key, Basic auth, or OAuth 2.0), with a copy button.
* **Try It Console** — a live request form visitors can edit (URL, headers, body)
and send directly from their own browser to see a real response. This performs
a genuine client-side request; it never proxies or issues the call from your
WordPress server.
* **Error Codes** — document your APIÌtumọ̀ Yorùbá: ’s error types and codes (e.
g. `invalid_request_error` / `parameter_missing`), distinct from HTTP status
codes, each with an optional expandable example error body.
* **Events** — list the webhook/event names a resource can emit (e.g. `customer.
created`), each with a description, an optional expandable example payload, and
a copy-link icon.
* **API Navigation** — auto-generates a jump-list of every Endpoint block on the
current page. No manual list to keep in sync as you add or reorder endpoints;
scans this page only, never your whole site.
* **Servers** — list an APIÌtumọ̀ Yorùbá: ’s base URLs (production, sandbox, regional)
each with a label and a copy button. Maps onto OpenAPIÌtumọ̀ Yorùbá: ’s `servers`
array, including server variable templating like `{region}`.
See every block with a live, interactive demo at [wpcodeapiblock.com/all-blocks](https://www.wpcodeapiblock.com/all-blocks/),
or browse the full block-by-block reference at [wpcodeapiblock.com/docs/main/blocks](https://www.wpcodeapiblock.com/docs/main/blocks/).
All blocks share the same visual language and the same light/dark theming, so a
full API reference page looks consistent throughout. Site-wide colors can be set
visually under **Settings Nahnu Code Block** — no code required — and any single
block can still override just its own colors for one-off branding.
**Using blocks outside the block editor**
Every block can also be rendered from a `[nahnu_code_block block="..."]` shortcode(
for widgets, page builders, or classic-editor content) or directly from PHP via `
nahnu_code_block_render()` (for theme templates) — see `INTEGRATION.md`. Both support
the same per-instance color overrides as the settings page.
#### External services and data
Nahnu Code & API Block does not connect to any external service, API, or CDN at
runtime, and does not collect, transmit, or store any personal data. The Prism.js
syntax-highlighting library is bundled with the plugin files (MIT licensed) rather
than loaded from a third-party server. The Try It Console block is the one exception
worth being explicit about: when a site visitor clicks “Send request” on that block,
their own browser makes a direct HTTP request to whatever URL is shown in that block(
which the page author configured, and the visitor can edit). That request comes
from the visitorÌtumọ̀ Yorùbá: ’s browser, not from your WordPress server, and nothing
about it is seen by this pluginÌtumọ̀ Yorùbá: ’s author or by Nahnu.
## Àwọn àwòrán ìbòjú
[⌊An Endpoint block and a code block together on a documentation page.⌉⌊An Endpoint
block and a code block together on a documentation page.⌉[
An Endpoint block and a code block together on a documentation page.
[⌊The "View all code" modal, opened from a collapsed code block.⌉⌊The "View all
code" modal, opened from a collapsed code block.⌉[
The “View all code” modal, opened from a collapsed code block.
[⌊The Try It Console alongside Authentication, Endpoint, and Parameters blocks.⌉⌊
The Try It Console alongside Authentication, Endpoint, and Parameters blocks.⌉[
The Try It Console alongside Authentication, Endpoint, and Parameters blocks.
[⌊Editing an Endpoint block's settings in the block editor.⌉⌊Editing an Endpoint
block's settings in the block editor.⌉[
Editing an Endpoint blockÌtumọ̀ Yorùbá: ’s settings in the block editor.
## Àwọn ìdí
Plugin yìí pèsè 12 àwọn ìdí.
* API Request / Response Tabbed request and response code examples per language,
synced across every request/response block on the page.
* API Servers List an API's base URLs — production, sandbox, regional endpoints—
each with a label and a copy button. Maps onto OpenAPI's 'servers' array.
* API Response Body Show what an API endpoint actually returns: a 'Returns' description,
response headers, and one or more real response bodies grouped by status code,
each expandable with its own copy button and an optional 'Show Schema' toggle
for the type shape.
* API Endpoint Show an API endpoint's HTTP method, path, a short summary, and
a longer description — with an optional deprecation notice and an auth-required
indicator.
* API Navigation Auto-generates a jump-list of every Endpoint block on this page—
no manual list to keep in sync. Scans this page only, not your whole site.
* API Parameters A parameters table for API documentation: name, type, location,
format, default value, example value, allowed values, validation constraints,
nullable, read-only/write-only, required/optional, deprecated, description, nested
object fields, and linkable type references. Can also act as a named, linkable
schema definition itself.
* API Try It Console A live request console visitors can use to call your API
directly from their browser and see the real response.
* Nahnu Code Block A professional, syntax-highlighted code snippet block with
light/dark mode, a collapsible preview, a copy button, and a full-code modal.
* API Status Codes A table of HTTP status codes your API returns, with meaning,
description, and an optional example body.
* API Events List the webhook/event names a resource can emit (e.g. customer.
created), each with a description and an optional example payload.
* API Authentication Show how to authenticate against an API: bearer token, API
key, basic auth, or OAuth 2.0.
* API Error Codes Document your API's error types and codes (e.g. invalid_request_error/
parameter_missing) — distinct from HTTP status codes, which are transport-level.
## Ìgbéwọlẹ̀
1. Upload the `nahnu-code-block` folder to `/wp-content/plugins/`, or install the
plugin through the **Plugins Add New** screen in your WordPress admin.
2. Activate the plugin through the **Plugins** screen.
3. Edit any post or page, add a new block, and search for “Nahnu” to see the full
set of code and API blocks.
4. Configure each block from its sidebar settings.
## FAQ
### Does this send my code anywhere?
No. Everything is rendered on your own server and in the visitorÌtumọ̀ Yorùbá: ’
s browser. The plugin makes no external network requests, with the one exception
noted above for the Try It Console, which is a request the visitor themselves chooses
to send.
### Will this conflict with my themeÌtumọ̀ Yorùbá: ’s or another pluginÌtumọ̀ Yorùbá: ’s dark mode switcher?
ItÌtumọ̀ Yorùbá: ’s designed to cooperate rather than compete. By default it follows
the visitorÌtumọ̀ Yorùbá: ’s OS-level light/dark preference. You can also use the`
nahnu_code_block_dark_mode_selectors` filter to tell it which CSS selector your
existing dark-mode plugin toggles (for example `body.dark-mode`), so the code block
switches along with the rest of your site.
### Can I integrate my own dark-mode toggle with this plugin?
Yes. If your theme or plugin already sets a class or attribute for dark mode (like`
body.dark-mode`), add it via the `nahnu_code_block_dark_mode_selectors` PHP filter
and it works automatically, with no JavaScript required. If your toggle is JavaScript-
driven, call `window.NahnuCodeBlock.setTheme('dark' | 'light' | 'auto')` from your
own click handler. Full details, including how to rebrand the actual colors, are
in `HOOKS.md` in the plugin folder.
### Can I change the syntax highlighting or table colors?
Yes. All colors are exposed as CSS custom properties scoped to `.nahnu-code-block`(
for example `--nahnu-code-block-token-string`), so they can be overridden from your
themeÌtumọ̀ Yorùbá: ’s stylesheet without touching plugin files.
### Is the Try It Console safe to use?
It only ever performs a request from the visitorÌtumọ̀ Yorùbá: ’s own browser to
a URL you configure (and the visitor can see and edit before sending). It does not
run on, or route through, your WordPress server, so it canÌtumọ̀ Yorùbá: ’t be used
to make your server call arbitrary internal or external URLs.
### Does it work with the Classic Editor?
No, not by adding a block through the Classic EditorÌtumọ̀ Yorùbá: ’s UI. You can
still
place any block on a Classic Editor page (or anywhere else outside the block
editor) using the `[nahnu_code_block block="..."]` shortcode, or by calling `nahnu_code_block_render()`
from a template if youÌtumọ̀ Yorùbá: ’re a developer — see “Can I render a block
from PHP or a theme template?” below.
### Can I render a block from PHP or a theme template?
Yes. Since version 1.0.2, `nahnu_code_block_render( 'endpoint', array( 'method'
=> 'GET', 'path' => '/v1/users' ) )`
(and its echoing counterpart `nahnu_code_block_the()`)
renders any of this pluginÌtumọ̀ Yorùbá: ’s blocks straight to HTML from a theme
template, a widget, or a page-builder module — no post content or block editor required.
The same thing is available as a `[nahnu_code_block block="..."]` shortcode for
places that only accept shortcodes. Full details, including how to pass each blockÌtumọ̀
Yorùbá: ’s attributes, are in `INTEGRATION.md`.
### Can I customize the colors without writing code?
Yes. **Settings Nahnu Code Block** has a color picker for each core
color (accent,
text, background, header/footer background, muted text, border) in both light and
dark mode — every block on your site picks these up automatically, however it was
added to the page, including blocks placed with the `[nahnu_code_block]` shortcode.
A single block or shortcode instance can also override just its own colors (e.g.
one partner-branded endpoint) without changing the site-wide palette — see HOOKS.
md for the shortcode attributes and the equivalent PHP filter.
## Àwọn àgbéyẹ̀wò
Kò sí àwọn àgbéyẹ̀wò fún plugin yìí.
## Àwọn Olùkópa & Olùgbéejáde
“Nahnu Code & API Block” jẹ́ ètò ìṣàmúlò orísun ṣíṣí sílẹ̀. Àwọn ènìyàn wọ̀nyí ti
ṣe ìkópa sí plugin yìí.
Àwọn Olùkópa
* [ Jaime Alnassim ](https://profiles.wordpress.org/ja1me4/)
[Túmọ̀ “Nahnu Code & API Block” sí èdè rẹ.](https://translate.wordpress.org/projects/wp-plugins/nahnu-code-block)
### Ṣe o nífẹ̀ẹ́ sí ìdàgbàsókè?
[Ṣàwárí koodu](https://plugins.trac.wordpress.org/browser/nahnu-code-block/), ṣàyẹ̀wò
[ibi ìpamọ́ SVN](https://plugins.svn.wordpress.org/nahnu-code-block/), tàbí ṣe àgbékalẹ̀
sí [àkọsílẹ̀ ìdàgbàsókè](https://plugins.trac.wordpress.org/log/nahnu-code-block/)
nípasẹ̀ [RSS](https://plugins.trac.wordpress.org/log/nahnu-code-block/?limit=100&mode=stop_on_copy&format=rss).
## Àkọsílẹ̀ àwọn àyípadà
#### 1.0.2
* Added a **WordPress Shortcode** language option to the code block, for displaying
example `[nahnu_code_block ...]` shortcode syntax (or any other pluginÌtumọ̀
Yorùbá: ’s shortcode syntax) as a properly highlighted, copy-pasteable code sample.
* Fixed: an example shortcode shown inside a code block could get picked up and
actually executed by WordPressÌtumọ̀ Yorùbá: ’s own `do_shortcode()`, which runs
over the entire rendered page after every block (including this one) has already
produced its output — square brackets pass through `esc_html()` untouched, so
a literal `[nahnu_code_block ...]` example was never actually inert. The code
blockÌtumọ̀ Yorùbá: ’s displayed brackets are now encoded as HTML entities at
the character level, which a browser still renders as ordinary `[`/`]` and which
the Copy button (reading the browserÌtumọ̀ Yorùbá: ’s own decoded text) still
copies as real, directly usable brackets — but which WordPressÌtumọ̀ Yorùbá: ’
s shortcode parser can no longer misread as a real invocation. This fixes example
shortcodes silently vanishing (or, worse, swallowing surrounding page content)
when shown this way; no double-bracket escaping needed.
* Added an optional **“Show a live rendered preview”** toggle for the WordPress
Shortcode language: runs the code sample for real and shows its actual output
in a separate, clearly labeled panel below the (still inert) code sample — useful
for demonstrating what a shortcode produces. This runs in isolation on just that
one code sample, never on the surrounding page, so it canÌtumọ̀ Yorùbá: ’t affect
anything outside its own preview panel.
* Added `nahnu_code_block_render()` (and `nahnu_code_block_the()`, its echoing
counterpart) so a theme or plugin developer can render any of this pluginÌtumọ̀
Yorùbá: ’s blocks directly from PHP — in a template file, a widget, or a page-
builder module — without needing the block to live in a postÌtumọ̀ Yorùbá: ’s
content or pass through the block editor.
* Added a `[nahnu_code_block block="..."]` shortcode wrapping the same rendering
path, for widgets, classic-editor content, and page builders that only accept
shortcodes.
* Fixed: any block whose main attribute is a JSON array or list (Parameters, Response
Body, Status Codes, Error Codes, Events, Servers, Request/Response, EndpointÌtumọ̀
Yorùbá: ’s related operations) — as well as the code-block blockÌtumọ̀ Yorùbá:’
s `code` attribute — now reads that value from the shortcodeÌtumọ̀ Yorùbá: ’s
enclosed content instead of a quoted attribute. A quoted attribute can never
safely hold a JSON array (WordPressÌtumọ̀ Yorùbá: ’s own shortcode parser treats
any `]` character inside the tag, even deep inside a quoted attributeÌtumọ̀ Yorùbá:’
s value, as the end of that shortcode — corrupting it the moment the array isnÌtumọ̀
Yorùbá: ’t empty), and canÌtumọ̀ Yorùbá: ’t hold real code containing a quote
character either.
* Fixed a much bigger issue affecting every `[nahnu_code_block]` attribute on every
block, not just the ones above: the shortcode handler was normalizing attributes
through `shortcode_atts()` against a list that only ever contained `block` and
the seven color-override names, which meant every other attribute a block actually
needed — `code`, `method`, `path`, `language`, all of it — was being silently
discarded before the block ever rendered, on every single shortcode call. On
top of that, WordPress always lowercases shortcode attribute names before a callback
sees them, which broke every camelCase attribute (`operationId`, `authRequired`,`
relatedOperations`, `showLineNumbers`, and others) independently of the first
bug. Both are fixed: every attribute now reaches its block correctly, under its
real declared name, regardless of the case it was written in.
* Added a **Settings Nahnu Code Block** admin page: a color picker for each core
theme color, in both light and dark mode, with no code required. Applies site-
wide, to every block however it was placed (block editor, PHP rendering, or the
shortcode).
* Added per-instance color overrides — `accentColor`, `accentTextColor`, `bgColor`,`
chromeBgColor`, `textColor`, `borderColor`, `mutedColor` shortcode attributes,
or a third argument to `nahnu_code_block_render()`/`nahnu_code_block_the()` —
so a single shortcode or PHP-rendered block can carry its own branding without
changing the site-wide palette.
* Fixed: a block rendered this new way after `wp_head()` has already printed (the
common case for a template file, since it usually runs after `get_header()`)
now still gets its stylesheet, instead of silently rendering unstyled.
* Documented the new PHP rendering API, shortcode, settings page, and per-instance
branding in `INTEGRATION.md` and `HOOKS.md`.
* Mobile responsiveness pass across all 12 blocks: the Parameters, Error Codes,
Status Codes, Events, and Response Body blocks’ tables now scroll horizontally
within their own container instead of squeezing columns unreadably or breaking
the pageÌtumọ̀ Yorùbá: ’s layout on narrow screens. The Try It consoleÌtumọ̀
Yorùbá: ’s method/URL row, the Request/Response language sub-tabs, the Authentication
header line, and the Response Body toolbar now wrap onto multiple lines on narrow
screens instead of overflowing. The code blockÌtumọ̀ Yorùbá: ’s copy/theme-toggle
toolbar and the deep-link anchor icons — both previously shown only on `:hover`—
are now always visible on touch devices, since touchscreens donÌtumọ̀ Yorùbá:’
t reliably trigger hover states.
#### 1.0.1
* Added six new blocks: Response Body (status-code accordion with real response
JSON), Error Codes (API-level error taxonomy, distinct from HTTP status codes),
Events (webhook/event names), API Navigation (auto-generated jump-list of Endpoint
blocks on the page), and Servers (base URLs, maps onto OpenAPIÌtumọ̀ Yorùbá: ’
s `servers` array).
* Parameters block: added Format and Default value badges, support for nested object
parameters (e.g. an `address` parameter with its own `line1`/`city` fields),
parameter location (`query`/`path`/`header`/`cookie`/`body`, matching OpenAPIÌtumọ̀
Yorùbá: ’s `in` field), a per-parameter Deprecated flag, and an Allowed-values(`
enum`) field.
* Added deep-linkable anchors: a copy-link icon on Parameters rows, Endpoint blocks,
Error Codes, and Events, each generating a stable, page-unique URL you can share
directly to that specific item.
* Added `nahnu_code_block_build_block_markup()` — lets another plugin (e.g. a docs
platform importing an OpenAPI spec) generate any of this pluginÌtumọ̀ Yorùbá:’
s blocks programmatically, with correct WordPress block markup and sensible attribute
defaults. Documented in the new `INTEGRATION.md`.
* Added the `nahnu_code_block_pre_attributes` filter, for third-party plugins that
scan the page and inject their own UI into `` elements (with a real example
for WP Super Docs, which was colliding with this pluginÌtumọ̀ Yorùbá: ’s own
copy button and language label).
* Security: filter-derived theme CSS is now stripped of characters that could break
out of the `