Title: Syntax Highlight Nano
Author: Takashi Fujisaki
Published: <strong>Desèmber 13, 2025</strong>
Last modified: Septèmber 17, 2026

---

Nggoléki Plugin

![](https://s.w.org/plugins/geopattern-icon/syntax-highlight-nano.svg)

# Syntax Highlight Nano

 Dening [Takashi Fujisaki](https://profiles.wordpress.org/ejointjp/)

[Ngundhuh](https://downloads.wordpress.org/plugin/syntax-highlight-nano.1.2.1.zip)

 * [Detil](https://jv.wordpress.org/plugins/syntax-highlight-nano/#description)
 * [Mācā ulang](https://jv.wordpress.org/plugins/syntax-highlight-nano/#reviews)
 *  [Pemasangan](https://jv.wordpress.org/plugins/syntax-highlight-nano/#installation)
 * [Pangembangan](https://jv.wordpress.org/plugins/syntax-highlight-nano/#developers)

 [Sokong](https://wordpress.org/support/plugin/syntax-highlight-nano/)

## Katrangan

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.
 * **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

 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:
 5.  * Select a programming language (or leave it for automatic detection).
     * Add a filename.
     * Toggle header visibility.
     * Toggle line number visibility.
 6. 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

The Catppuccin themes are based on @catppuccin/highlightjs (MIT License).
 Copyright(
c) 2021 Catppuccin https://github.com/catppuccin/highlightjs

### Support

For support, feature requests, and bug reports, please use the support forum: https://
wordpress.org/support/plugin/syntax-highlight-nano/

## Gambar conto

[⌊Code block in the WordPress editor with syntax highlight settings.⌉⌊Code block
in the WordPress editor with syntax highlight settings.⌉[

Code block in the WordPress editor with syntax highlight settings.

[⌊Frontend display with syntax highlighting, header, and line numbers.⌉⌊Frontend
display with syntax highlighting, header, and line numbers.⌉[

Frontend display with syntax highlighting, header, and line numbers.

[⌊Copy‑to‑clipboard button appearing on hover.⌉⌊Copy‑to‑clipboard button appearing
on hover.⌉[

Copy‑to‑clipboard button appearing on hover.

[⌊Block settings panel with language selection and customization options.⌉⌊Block
settings panel with language selection and customization options.⌉[

Block settings panel with language selection and customization options.

## Pemasangan

 1. Log in to your WordPress admin dashboard.
 2. Go to **Plugins > Add New**.
 3. Search for “Syntax Highlight Nano”.
 4. Click **Install Now**, then click **Activate**.

## FAQ

### What programming languages are supported?

Syntax Highlight Nano supports a wide range of languages including JavaScript, TypeScript,
PHP, Python, Ruby, Java, C#, C++, C, Go, Rust, Swift, Kotlin, HTML, CSS, SCSS, Less,
JSON, XML, YAML, Markdown, SQL, Bash, Shell, PowerShell, and AppleScript.

### Will this affect my existing code blocks?

Yes. This plugin enhances all standard WordPress `core/code` blocks. Existing code
blocks are automatically highlighted based on your settings.

### Is it compatible with my theme?

The plugin uses its own scoped CSS to minimize conflicts with themes. It is designed
to be as non‑intrusive as possible. If you encounter any styling issues, please 
report them.

### Does it impact website performance?

The plugin is optimized for performance. Highlight.js is only loaded on pages that
contain code blocks, and editor assets are only loaded in the WordPress admin.

### Can I customize the styling?

Yes. You can override the default styles by adding custom CSS to your theme’s `style.
css` or via the WordPress Customizer. The plugin uses CSS variables to make theme
adjustments easier.

## Mācā ulang

There are no reviews for this plugin.

## Contributors & Developers

“Syntax Highlight Nano” is open source software. The following people have contributed
to this plugin.

Kontributor

 *   [ Takashi Fujisaki ](https://profiles.wordpress.org/ejointjp/)

“Syntax Highlight Nano” has been translated into 1 locale. Thank you to [the translators](https://translate.wordpress.org/projects/wp-plugins/syntax-highlight-nano/contributors)
for their contributions.

[Translate “Syntax Highlight Nano” into your language.](https://translate.wordpress.org/projects/wp-plugins/syntax-highlight-nano)

### Interested in development?

[Browse the code](https://plugins.trac.wordpress.org/browser/syntax-highlight-nano/),
check out the [SVN repository](https://plugins.svn.wordpress.org/syntax-highlight-nano/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/syntax-highlight-nano/)
by [RSS](https://plugins.trac.wordpress.org/log/syntax-highlight-nano/?limit=100&mode=stop_on_copy&format=rss).

## Caathetan Owahan

#### 1.2.1

 * Fixed the support link, which pointed to a repository that does not exist. Support
   is now handled on the WordPress.org support forum.

#### 1.2.0

 * New: Four color themes added: Solarized Light, Solarized Dark, Catppuccin Latte,
   and Catppuccin Mocha. Pick one under Settings > Syntax Highlight Nano.
 * Tested up to WordPress 7.1.

#### 1.1.6

 * Bug fix: Translations for the block editor and the settings screen were never
   applied on non-English sites, because the translation catalogs did not match 
   the built scripts. Japanese now displays correctly.
 * Improvement: Bundled PHP translation files (.l10n.php) so translations load faster
   on WordPress 6.5 and above.
 * Improvement: Removed development files and screenshot assets from the plugin 
   package, reducing the download size by about 500 KB.

#### 1.1.5

 * Tested up to WordPress 7.0.

#### 1.1.4

 * Bug fix: Line numbers, header, and copy button now take their color from the 
   selected highlight.js theme instead of the site theme, so they stay readable 
   when a dark code theme is used on a light site (and vice versa).
 * Bug fix: The checkmark shown after a successful copy is now colored correctly.
 * Build: Switched the build pipeline to @wordpress/scripts.

#### 1.1.3

 * Style: Migrated to CSS custom properties based on design tokens.

#### 1.1.2

 * Bug fix: Resolved 500 fatal error on code block save caused by undefined settings
   array keys in PHP 8.1+.

#### 1.1.1

 * Bug Fix.

#### 1.1.0

 * Added support for AppleScript.
 * Update CSS.

#### 1.0.4

 * Bug Fix.

#### 1.0.3

 * Added copy and checkmark icons to the copy button for better visual feedback.
 * Improved language detection accuracy with proper language name mapping.

#### 1.0.2

 * Implemented a “Copy to clipboard” button that appears when hovering over code
   blocks.
 * Added `has-filename` CSS class to support filename-based headers.

#### 1.0.1

 * Optimized the frontend HTML structure to use the `<pre>` tag directly for styling.
 * Improved CSS for better integration and responsive behavior.
 * Switched to client-side language auto-detection using highlight.js.

#### 1.0.0

 * Initial release of Syntax Highlight Nano.
 * Added syntax highlighting, custom headers, and line numbers to WordPress code
   blocks.

## Meta

 *  Version **1.2.1**
 *  Last updated **1 pekan sing kepungkur**
 *  Active installations **10+**
 *  WordPress version ** 6.0 or higher **
 *  Tested up to **7.1.2**
 *  PHP version ** 7.4 or higher **
 *  Languages
 * [English (US)](https://wordpress.org/plugins/syntax-highlight-nano/) and [Japanese](https://ja.wordpress.org/plugins/syntax-highlight-nano/).
 *  [Translate into your language](https://translate.wordpress.org/projects/wp-plugins/syntax-highlight-nano)
 * Tags
 * [code](https://jv.wordpress.org/plugins/tags/code/)[code block](https://jv.wordpress.org/plugins/tags/code-block/)
   [gutenberg](https://jv.wordpress.org/plugins/tags/gutenberg/)[highlight.js](https://jv.wordpress.org/plugins/tags/highlight-js/)
   [syntax highlighting](https://jv.wordpress.org/plugins/tags/syntax-highlighting/)
 *  [Nonton lanjutan](https://jv.wordpress.org/plugins/syntax-highlight-nano/advanced/)

## Peringkat

No reviews have been submitted yet.

[Your review](https://wordpress.org/support/plugin/syntax-highlight-nano/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/syntax-highlight-nano/reviews/)

## Kontributor

 *   [ Takashi Fujisaki ](https://profiles.wordpress.org/ejointjp/)

## Sokong

Got something to say? Need help?

 [View support forum](https://wordpress.org/support/plugin/syntax-highlight-nano/)