內容簡介
Code Block 外掛能將普通程式碼轉換為美觀的高亮片段，讓讀者能輕鬆複製，並可直接在 Gutenberg 編輯器中使用。此外掛適合開發者、教育工作者及技術寫手，提升程式碼示例的可讀性與專業度。
【主要功能】
• 一鍵複製按鈕：讀者可一鍵複製整段程式碼
• 多種語法主題：選擇與網站設計相符的主題
• 語法高亮：提升主要語言的可讀性
• 響應式程式碼顯示：在各種裝置上流暢顯示
• 短碼支援：可在網站任何地方嵌入程式碼片段
• 專屬區塊分類：所有區塊在 Gutenberg 插入器中歸類於「Code」
外掛標籤
開發者團隊
② 後台搜尋「Code Block – share beautiful code snippets readers can copy」→ 直接安裝（推薦）
原文外掛簡介
Turn plain code into beautifully highlighted, copy-ready snippets your readers will love – right inside the Gutenberg editor.
Code Snippets Block | Pricing | Support | Live Demos
Why Code Snippets Block?
Code Snippets Block is a lightweight Gutenberg plugin that displays programming code in WordPress with syntax highlighting, copy-to-clipboard functionality, and customizable themes. Whether you’re sharing PHP, JavaScript, Python, HTML, CSS, JSON, or SQL, your snippets stay readable, consistent, and easy to copy with a single click.
Perfect for developers, educators, technical writers, and bloggers, it makes code examples, developer documentation, programming tutorials, and technical guides look clean and professional – with pre-styled themes to match your site’s design.
Built specifically for WordPress and Gutenberg, the plugin is responsive, SEO-friendly, and loads its optimized assets only when a block is on the page, keeping your site lightning-fast.
Free Features
One-Click Copy Button: Readers copy the entire snippet to their clipboard in a single click, with customizable text/icon.
Multiple Syntax Themes: Choose from pre-styled themes (like Dark, Midnight, and Light) to match your website design.
Syntax Highlighting: Improve readability for all major languages – PHP, JavaScript, Python, HTML, CSS, and more.
Responsive Code Views: Snippets wrap and resize smoothly on mobile, tablet, and desktop.
Shortcode Support: Embed code snippets anywhere on your site.
Dedicated Block Category: All blocks are grouped under a “Code” category in the Gutenberg inserter for easy access.
Optimized & Lightweight: Assets load only when a block is on the page, with minimal impact on page speed.
Pro Version
Upgrade to Pro to unlock a suite of 16 interactive developer blocks:
Run Python (WASM): A live Python interpreter powered by Pyodide (WebAssembly) that runs in the reader’s browser – no server-side execution, lazy-loaded for speed.
Code Screencast (Self-Typing): Animated, character-by-character typing walkthroughs.
JSON Explorer: Interactive, collapsible, searchable JSON tree views with match-highlighting and copy-path tools.
Regex Tester: A live regular-expression sandbox with highlighted match output.
Spotlight Code: Walk readers through specific lines by dimming or blurring the rest, with captioned steps.
Code Snapshot: Turn snippets into mockup graphics with window chrome, gradients, and shadows – download as PNG or copy image.
API Try-It Console: A functional HTTP/REST client block for live requests with timing, status, and formatted responses.
Annotated Code: Clickable badges on specific lines that reveal detailed explanations.
AI Code Explainer: Generate plain-English explanations using OpenAI or Anthropic inside the editor.
Diagram as Code: Write Mermaid text and render flowcharts, sequence diagrams, class diagrams, Gantt charts, and pie charts.
Live Code Playground: An HTML/CSS/JS sandbox in a secure iframe with instant visual previews.
Code Diff / Comparison: Highlight added/removed lines in Unified or Split view.
Multi-Tab Code Switcher: Organize snippets under tabs (e.g. npm vs yarn, or JavaScript vs PHP).
Terminal / Command Line: A styled shell emulator with typing animations and one-click copy of commands.
Remote Code Embed: Fetch code from GitHub Gists, raw files, or CodePen pens, styled in your own theme.
Advanced Code Block Styling: Custom colors, font sizes, paddings, borders, shadows, alignment, and line numbering.
How to Use
Install and activate the Code Snippets Block plugin.
In the Gutenberg editor, add the Code Snippets block.
Paste your code and pick a syntax theme.
Adjust settings from the right-side settings sidebar.
Publish – your highlighted, copy-ready snippet is live!
Use Cases
Programming Tutorials: Make your snippets easy to read and copy.
Developer Documentation: Keep code examples clean and consistent.
Developer Portfolios: Showcase your clean code with pride.
Technical Knowledge Bases: Present reference code in a professional format.
Educational Coding Resources: Help students follow along and copy examples.
Liked this plugin? Want a new feature? Send us some feedback.
⭐ Check out the Parent Plugin of this plugin-
🔥 b Blocks – Best gutenberg blocks collections for WordPress.
⭐ Check out our other WordPress Plugins-
🔥 Html5 Audio Player – Best audio player plugin for WordPress.
🔥 Html5 Video Player – Best video player plugin for WordPress.
🔥 PDF Poster – A fully-featured PDF Viewer Plugin for WordPress.
🔥 StreamCast – A fully-featured Radio Player Plugin for WordPress.
🔥 3D Viewer – Display interactive 3D models on the webs.
