Code Block – share beautiful code snippets readers can copy

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.

Syntax Highlighting

Display programming code with syntax highlighting to make code easier to read and understand.

Supports popular languages including:

• PHP
• JavaScript
• Python
• HTML
• CSS
• JSON
• SQL
• And more

Terminal and Command Line

Display command-line examples in a terminal-style interface with copy controls and optional typing animations.

Remote Code Embed

Display code from supported external sources such as GitHub Gists, raw files, or CodePen. Use remote code embeds when you want to maintain or reference code from an external source.

One-Click Copy Code

Add a copy button so visitors can copy an entire code snippet to their clipboard with one click. The copy button text and icon can be customized from the block settings.

Diagram as Code

Write Mermaid syntax and display diagrams such as:

• Flowcharts
• Sequence diagrams
• Class diagrams
• Gantt charts
• Pie charts

Live Code Playground

Create interactive HTML, CSS, and JavaScript examples inside a secure iframe with live previews.

Programming Tutorials

Publish step-by-step tutorials with readable and copyable code examples.

Code Diff and Comparison

Compare two versions of code using a unified or split comparison view.

Useful for:

• Before and after examples
• Code reviews
• Version comparisons
• Tutorial explanations
• Documentation

Multi-Tab Code Examples

Organize multiple code examples inside tabs.

For example:

• JavaScript / PHP
• npm / yarn
• HTML / CSS
• Before / After
• REST API examples

Advanced Code Styling

Customize code presentation with advanced styling options such as:

• Colors
• Font sizes
• Padding
• Borders
• Shadows
• Alignment
• Line numbers

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.
• API Documentation : Display request examples, JSON responses, commands, and other API-related code.

Who Is Code Snippets Block For?

Code Snippets Block is designed for:

• WordPress developers
• Web developers
• Programming bloggers
• Technical writers
• Documentation teams
• Online educators
• Coding tutorial creators
• Developer portfolio owners
• Software agencies
• Technical knowledge-base websites

Happy User of Code Block?

• Join our Facebook Community Group
• Learn from our tutorials on YouTube Channel
• Or rate Code Block on WordPress

How to Create a Code Tutorial in WordPress

For a tutorial, you can combine regular Gutenberg content with Code Block.

A typical tutorial can include:

1. 01An explanation of the problem.
2. 02A code example.
3. 03A copy button for the example.
4. 04An explanation of how the code works.
5. 05An interactive example when needed.
6. 06A final result or expected output.

This structure works well for programming tutorials, documentation, and educational content.

How to Use

1. 07Install and activate the Code Snippets Block plugin.
2. 08In the Gutenberg editor, add the Code Snippets block.
3. 09Paste your code and pick a syntax theme.
4. 10Adjust settings from the right-side settings sidebar.
5. 11Publish – your highlighted, copy-ready snippet is live!

How to Add Code with Shortcode

Code Snippets Block also supports shortcode-based embedding.

1. 12Create your code snippet.
2. 13Copy the generated shortcode.
3. 14Paste the shortcode into a shortcode-supported area.
4. 15Save or publish the page.

This allows you to display code snippets in different areas of your WordPress website.

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.