Syntax Highlight Nano

Syntax Highlight Nano adds beautiful, customizable syntax highlighting to WordPress’s core code block. It integrates seamlessly with the Gutenberg editor, providing a consistent look and feel between the editor and the frontend. Because it extends the existing “Code” block, there is no need for a separate custom block or switching between different block types. This plugin is built on top of highlight.js, ensuring accurate and performant syntax highlighting for a wide variety of languages.

Features

• Automatic language detection: Intelligently detects the programming language of your code.
• Customizable header: Optionally display a header above the code block with a filename or language name.
• Line numbers: Toggle line numbers on or off to improve code readability.
• Copy to clipboard button: A convenient button appears on hover, allowing users to copy the code with a single click.
• Lightweight and performant: Uses highlight.js for efficient, optimized syntax highlighting.
• WordPress best practices: Built following WordPress development standards.

How to Use

1. Install and activate the plugin.
2. In the WordPress editor, add a standard “Code” block.
3. Enter your code.
4. In the block settings sidebar, you can:
   • Select a programming language (or leave it for automatic detection).
   • Add a filename.
   • Toggle header visibility.
   • Toggle line number visibility.
5. The code block will be automatically highlighted on the frontend.

Privacy

This plugin does not collect any personal data. It does not set cookies or connect to external services. All processing happens locally on your server and in the user’s browser.

Credits

This plugin uses highlight.js (BSD 3‑Clause License). Copyright (c) 2006, Ivan Sagalaev https://github.com/highlightjs/highlight.js

Support

For support, feature requests, and bug reports, please visit: https://github.com/takashifujisaki/syntax-highlight-nano/issues