Coywolf Code Block Enhancer
Coywolf Code Block Enhancer extends the built-in core/code block. In the editor it adds a “Code language” dropdown to the block sidebar; on the front end it highlights the code with Prism.js using a custom token palette, prints the language name as a small label on the block, and pins a copy-to-clip
Coywolf Code Block Enhancer extends the built-in core/code block. In the editor it adds a “Code language” dropdown to the block sidebar; on the front end it highlights the code with Prism.js using a custom token palette, prints the language name as a small label on the block, and pins a copy-to-clipboard button to the top-right corner.
- Adds a “Code language” dropdown to the core Code block’s sidebar. A baseline of 9 languages (Bash, CSS, HTML/Markup, JavaScript, JSON, PHP, Python, SQL, YAML) is always loaded; an additional 40 grammars can be toggled on via Language packs in Tools → Code Blocks (Web/App dev — TypeScript, JSX/TSX, SCSS, Sass, Less, GraphQL — is enabled by default).
- Highlights code on the front end with Prism.js. Pick from 45 bundled themes — the 8 stock Prism themes (Prism Default, Coy, Dark, Funky, Okaidia, Solarized Light, Tomorrow Night, Twilight) plus 37 community themes from PrismJS/prism-themes (a11y Dark, Atom Dark, Dracula, Nord, One Dark, Night Owl, Synthwave ’84, Gruvbox, Material, VS Code Dark+, and more) — or the bundled Default palette (selected on first install).
- Adds a small language label in the top-left of each highlighted block (only when a language is set).
- Adds an accessible copy-to-clipboard button — aria-label , a polite status region that announces “Copied to clipboard,” and a visible “✓” state for two seconds after a successful copy. Falls back to document.execCommand(‘copy’) on non-HTTPS or older browsers.
- Assets load only on singular posts/pages that contain a code block; Prism core and grammars are loaded with the defer strategy so they never block rendering.
- Dark-mode aware out of the box — with the bundled Default — Auto theme (selected on first install), code blocks follow each visitor’s prefers-color-scheme automatically. Override from Tools → Code Blocks by switching to Default — Always light / Always dark , or by picking any of the static Prism themes.
How it works
The chosen language is stored as a language block attribute on core/code, which lives in the block delimiter comment rather than the saved markup. That means blocks without a language stay valid and existing content is never migrated.
On render, the plugin uses WP_HTML_Tag_Processor to add data-language to the <pre> and language-xxx to the <code> server-side — so KSES won’t strip data-* attributes for non-admin authors, and there is no block-validation churn.
