Description
The Youbou Code Block is a Gutenberg block plugin for WordPress that allows users to easily add syntax-highlighted code snippets to their posts and pages. This plugin supports a wide range of programming languages and includes a convenient copy-to-clipboard functionality.
Features
- Syntax highlighting for various programming languages
- Supports the following languages:
- HTML
- CSS
- SCSS
- JavaScript
- TypeScript
- PHP
- Ruby
- Python
- Swift
- C
- C#
- C++
- Objective-C
- SQL
- JSON
- Bash
- Git
- Copy-to-clipboard functionality for code snippets
- Easy to use Gutenberg block interface
Development
Use the Node version in .nvmrc, then run npm ci, composer install, npm test, and npm run build.
Run npm run test:browser after installing Chromium with npx playwright install chromium.
Run the configured lint commands and Plugin Check before publishing. npm run release builds a production ZIP with its Composer autoloader in release/; it does not deploy the plugin.
Regenerate messages with npm run i18n:pot. When translated PO files are available, use npm run i18n:json to produce catalogs mapped to the shipped bundles. No translations are fabricated by these commands.
License
This plugin is licensed under the GPLv2 or later. For more information, see http://www.gnu.org/licenses/gpl-2.0.html.
Screenshots
Blocks
This plugin provides 1 block.
- Youbou Code Block Code block with syntax highlighting.
Installation
- Upload the complete release ZIP through the WordPress plugins screen, or extract it into
/wp-content/plugins/youbou-code-block. - Activate the plugin through the ‘Plugins’ screen in WordPress.
- Navigate to the Gutenberg editor and add the ‘Youbou Code Block’ to your post or page.
- Select the programming language and add your code.
FAQ
-
What programming languages are supported?
-
The plugin supports the following languages:
* HTML
* CSS
* SCSS
* JavaScript
* TypeScript
* PHP
* Ruby
* Python
* Swift
* C
* C#
* C++
* Objective-C
* SQL
* JSON
* Bash
* Git -
How do I use the copy-to-clipboard functionality?
-
Use the ‘Copy code’ button above the code block. It is available with a keyboard or touch. If clipboard access fails, select the code and press Ctrl+C or Command+C.
-
Will updating repair code previously changed by HTML entity decoding?
-
Version 1.0.1 preserves literal entities in newly saved code. It preserves the text parsed from existing blocks, but cannot infer the original spelling of code already changed by earlier versions. Restore that text from a revision or your original source if necessary.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Youbou Code Block” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Youbou Code Block” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0.1
- Preserve literal HTML entities when saving and reopening code.
- Update Prism to 1.30.0 and isolate highlighting and styles to this block.
- Improve keyboard focus, editor labels, translated copy feedback, and clipboard fallback handling.
- Correct minimum-version checks, translation paths, and release packaging.
1.0
- Initial release of the Code Highlighting Block plugin.