About this plugin
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.
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.
- 10 color themes: Choose from light and dark themes including GitHub, Monokai, Solarized, and Catppuccin.
- Lightweight and performant: Uses highlight.js for efficient, optimized syntax highlighting.
- WordPress best practices: Built following WordPress development standards.
How to Use
- Install and activate the plugin.
- In the WordPress editor, add a standard “Code” block.
- Enter your code.
- 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.
- 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
js (BSD 3‑Clause License).
Copyright (c) 2006, Ivan Sagalaev
js
The Catppuccin themes are based on @catppuccin/highlightjs (MIT License).
Copyright (c) 2021 Catppuccin
com/catppuccin/highlightjs
Support
org/support/plugin/syntax-highlight-nano/