plugin-icon

Coywolf Code Block Enhancer

제작자: Jon Henshaw·
Syntax highlighting and a copy-to-clipboard button for the native WordPress Code block, plus a language picker in the editor sidebar.
버전
1.0.57
최근 업데이트일
Jun 15, 2026

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.

Prism core and the per-language grammars are bundled under assets/prism/ at v1.30.0 (MIT — see assets/prism/LICENSE.txt). They register as deferred scripts with explicit dependency ordering (e.g. markup-templating before php, clike before languages that extend it). The copy-button script depends on the last grammar in the chain, so all of Prism is present before the copy UI is wired up. Reading code.textContent returns the original source even after Prism wraps tokens in spans, so the copied text is unaffected by highlighting.

Self-hosting Prism (rather than loading from a public CDN) keeps the third-party-script supply chain off the plugin’s surface and means the plugin works on sites with strict CSPs or no external egress.

Privacy

Privacy-first: this plugin includes no analytics, no tracking, and no data gathering. Nothing about you, your site, or your visitors is ever collected or sent anywhere.

무료유료 요금제에서
설치하면 WordPress.com 서비스 약관서드파티 플러그인 약관에 동의하게 됩니다.
테스트된 버전
WordPress 7.0
이 플러그인은 다운로드할 수 있으며 에서 사용할 수 있습니다.