|
8 | 8 |
|
9 | 9 | __Requires:__ 6.6 |
10 | 10 |
|
11 | | -__Tested up to:__ 6.7 |
| 11 | +__Tested up to:__ 6.9 |
12 | 12 |
|
13 | 13 | __Requires PHP:__ 7.4 |
14 | 14 |
|
15 | 15 | __License:__ [GPL-2.0+](http://www.gnu.org/licenses/gpl-2.0.html) |
16 | 16 |
|
17 | | -__Plugin page:__ [WebberZone Code Block Highlighting home page](https://webberzone.com/plugins/webberzone-code-block-highlighting/) | [WordPress.org listing](https://wordpress.org/plugins/webberzone-code-block-highlighting/) |
| 17 | +__Plugin page:__ [WebberZone Code Block Highlighting](https://webberzone.com/plugins/webberzone-code-block-highlighting/) | [WordPress.org listing](https://wordpress.org/plugins/webberzone-code-block-highlighting/) |
18 | 18 |
|
19 | 19 | Add beautiful syntax highlighting to the Gutenberg Code block — powered by Prism.js with 18 themes and 35+ languages, zero configuration required. |
20 | 20 |
|
21 | 21 | ## Description |
22 | 22 |
|
23 | | -WebberZone Code Block Highlighting extends the native WordPress Gutenberg `core/code` block with [Prism.js](https://prismjs.com/) syntax highlighting. It does not replace the block — existing posts remain fully compatible with zero risk of block validation errors. |
| 23 | +__WebberZone Code Block Highlighting__ is the easiest way to add syntax highlighting to your WordPress site. It extends the native Gutenberg `core/code` block with [Prism.js](https://prismjs.com/) highlighting — no shortcodes, no block replacement, no risk of breaking existing posts. |
24 | 24 |
|
25 | | -### Key features |
| 25 | +Simply activate the plugin and your code blocks will instantly display beautiful, readable syntax highlighting on the frontend. Choose from 35+ programming languages and 18 colour themes, all controlled from the block editor's Inspector Controls sidebar. |
26 | 26 |
|
27 | | -* __Zero configuration__: Activate and start writing. Prism.js highlighting is automatically applied to all code blocks on the frontend. |
28 | | -* __35+ languages__: Pick the language for each code block from the Inspector Controls panel in the block editor. Includes Bash, C, C++, C#, CSS, Dart, Docker, F#, Go, GraphQL, Haskell, HTML, Java, JavaScript, JSON, JSX, Kotlin, Markdown, Nginx, Objective-C, PHP, PowerShell, Python, Ruby, Rust, Sass, SQL, Swift, TOML, TSX, TypeScript, Vim, XML, YAML and more. |
29 | | -* __18 beautiful themes__: Choose from A11y Dark, Atom Dark, Darcula, Dracula, GitHub (Light), Gruvbox Dark, Gruvbox Light, Material Dark, Material Oceanic, Night Owl, Nord, One Dark, One Light, Shades of Purple, Solarized Dark, Synthwave '84, VS (Light), and VS Code Dark+. |
30 | | -* __Line numbers__: Toggle line numbers per code block from the editor sidebar. |
31 | | -* __Block title / label__: Add an optional title or filename label to each code block. |
32 | | -* __Smart asset loading__: Prism CSS and JS are only enqueued on pages that actually contain code blocks, keeping other pages fast. |
33 | | -* __Extendable__: Developer-friendly filters to customize the language list, override the theme CSS URL, or force assets to load on every page. |
| 27 | +### Why use this plugin? |
34 | 28 |
|
35 | | -### How it works |
| 29 | +* __Safe by design__ — Works as a filter on top of `core/code`. Existing posts are never invalidated. Deactivate the plugin and your blocks are still valid standard WordPress code blocks. |
| 30 | +* __Zero configuration__ — Activate and start writing. No setup wizard, no shortcodes. |
| 31 | +* __Smart asset loading__ — Prism CSS and JS only load on pages that actually contain code blocks. Pages without code stay fast. |
| 32 | +* __Per-block controls__ — Set language, theme, line numbers, word wrap, title, highlighted lines, and max height individually for each block. |
| 33 | +* __Developer-friendly__ — Filters to add languages, override themes, and force asset loading. |
36 | 34 |
|
37 | | -The plugin uses three layers of integration with the block editor: |
| 35 | +### Supported languages |
38 | 36 |
|
39 | | -1. __Editor attributes__ — A `blocks.registerBlockType` JS filter adds `language`, `lineNumbers`, and `title` attributes to `core/code` without replacing it. |
40 | | -2. __InspectorControls__ — A `editor.BlockEdit` HOC adds a sidebar panel with a language picker, line number toggle, and title field. |
41 | | -3. __Frontend rendering__ — A `render_block_core/code` PHP filter injects the `language-*` class onto the `<code>` element so Prism.js picks it up automatically. |
| 37 | +35+ languages out of the box: Bash, C, C++, C#, CSS, Dart, Docker, F#, Go, GraphQL, Haskell, HTML, Java, JavaScript, JSON, JSX, Kotlin, Markdown, Nginx, Objective-C, PHP, PowerShell, Python, Ruby, Rust, Sass, SQL, Swift, TOML, TSX, TypeScript, Vim, XML, YAML, and more. Use the `wz_cbh_languages` filter to register additional languages. |
42 | 38 |
|
43 | | -### Developer filters |
| 39 | +### Included themes (18) |
44 | 40 |
|
45 | | -* `wz_cbh_languages` — filter the language list array (`slug => label`) |
46 | | -* `wz_cbh_color_scheme_css_url` — override the Prism theme CSS URL |
47 | | -* `wz_cbh_force_load_assets` — force Prism assets to load on every page |
| 41 | +A11y Dark, Atom Dark, Darcula, Dracula, GitHub (Light), Gruvbox Dark, Gruvbox Light, Material Dark, Material Oceanic, Night Owl, Nord, One Dark, one Light, Shades of Purple, Solarized Dark, Synthwave '84, VS (Light), VS Code Dark+. |
48 | 42 |
|
49 | | -### GDPR |
| 43 | +### Per-block features |
| 44 | + |
| 45 | +* __Language selector__ — Choose the programming language from the sidebar; applies the correct Prism grammar automatically. |
| 46 | +* __Line numbers__ — Toggle line numbers per block, with a configurable start line. |
| 47 | +* __File title / label__ — Add an optional filename or label displayed in the code block toolbar. |
| 48 | +* __Highlight lines__ — Specify lines or ranges (e.g. `1,3-5`) to visually highlight using the Prism line-highlight plugin. |
| 49 | +* __Max height with expand/collapse__ — Set a maximum height in pixels; an expand/collapse toolbar button appears automatically. |
| 50 | +* __Word wrap__ — Toggle soft word wrapping per block. |
50 | 51 |
|
51 | | -WebberZone Code Block Highlighting does not collect personal data or communicate with external services. |
| 52 | +### Global settings |
52 | 53 |
|
53 | | -### Contribute |
| 54 | +* Default colour scheme (theme) |
| 55 | +* Default language |
| 56 | +* Default line numbers toggle and start value |
| 57 | +* Default word wrap |
| 58 | +* Copy-to-clipboard button |
| 59 | +* Show language label in toolbar |
| 60 | +* Font size |
54 | 61 |
|
55 | | -WebberZone Code Block Highlighting is available on [Github](https://github.com/WebberZone/webberzone-code-block-highlighting). If you have a feature you'd like to implement or a bug you've fixed, consider forking the project and sending a pull request. |
| 62 | +### Developer filters |
56 | 63 |
|
57 | | -Bug reports are [welcomed on Github](https://github.com/WebberZone/webberzone-code-block-highlighting/issues). Please note Github is _not_ a support forum, and issues that aren't suitably qualified as bugs will be closed. |
| 64 | +* `wz_cbh_languages` — Filter the language list array (`slug => label`) |
| 65 | +* `wz_cbh_color_scheme_css_url` — Override the Prism theme CSS URL |
| 66 | +* `wz_cbh_force_load_assets` — Force Prism assets to load on every page |
58 | 67 |
|
59 | | -### Translations |
| 68 | +### GDPR |
60 | 69 |
|
61 | | -WebberZone Code Block Highlighting is available for [translation directly on WordPress.org](https://translate.wordpress.org/projects/wp-plugins/webberzone-code-block-highlighting). Check out the official [Translator Handbook](https://make.wordpress.org/polyglots/handbook/rosetta/theme-plugin-directories/) to contribute. |
| 70 | +WebberZone Code Block Highlighting does not collect personal data, set cookies, or communicate with any external services. |
62 | 71 |
|
63 | 72 | ## Screenshots |
64 | 73 |
|
65 | 74 | More screenshots are available on the [WordPress plugin page](https://wordpress.org/plugins/webberzone-code-block-highlighting/screenshots/). |
66 | 75 |
|
67 | | -## Other plugins by WebberZone |
| 76 | +## Installation |
68 | 77 |
|
69 | | -WebberZone Code Block Highlighting is one of the many plugins developed by WebberZone. Check out our other plugins: |
| 78 | +### WordPress admin (recommended) |
70 | 79 |
|
71 | | -* [Contextual Related Posts](https://wordpress.org/plugins/contextual-related-posts/) - Display fast, intelligent related posts to keep visitors on your site longer |
72 | | -* [Top 10](https://wordpress.org/plugins/top-10/) - Track daily and total visits to your blog posts and display the popular and trending posts |
73 | | -* [WebberZone Snippetz](https://wordpress.org/plugins/add-to-all/) - The ultimate snippet manager for WordPress to create and manage custom HTML, CSS or JS code snippets |
74 | | -* [Knowledge Base](https://wordpress.org/plugins/knowledgebase/) - Create a knowledge base or FAQ section on your WordPress site |
75 | | -* [Better Search](https://wordpress.org/plugins/better-search/) - Enhance the default WordPress search with contextual results sorted by relevance |
76 | | -* [Auto-Close](https://wordpress.org/plugins/autoclose/) - Automatically close comments, pingbacks and trackbacks and manage revisions |
77 | | -* [Popular Authors](https://wordpress.org/plugins/popular-authors/) - Display popular authors in your WordPress widget |
78 | | -* [Followed Posts](https://wordpress.org/plugins/where-did-they-go-from-here/) - Show a list of related posts based on what your users have read |
| 80 | +1. Go to __Plugins > Add New__ in your WordPress admin. |
| 81 | +2. Search for __WebberZone Code Block Highlighting__. |
| 82 | +3. Click __Install Now__, then __Activate__. |
79 | 83 |
|
80 | | -## Installation |
| 84 | +### Manual installation |
81 | 85 |
|
82 | | -### WordPress install (the easy way) |
| 86 | +1. Download the plugin zip file. |
| 87 | +2. Extract it to your `wp-content/plugins/` directory. You should end up with a `webberzone-code-block-highlighting/` folder. |
| 88 | +3. Go to __Plugins__ in your WordPress admin and activate __WebberZone Code Block Highlighting__. |
83 | 89 |
|
84 | | -1. Navigate to Plugins within your WordPress Admin Area |
85 | | -2. Click "Add new" and in the search box enter "WebberZone Code Block Highlighting" |
86 | | -3. Find the plugin in the list (usually the first result) and click "Install Now" |
| 90 | +After activation, open any post or page in the block editor, add or select a Code block, and the __Code Highlighting__ panel will appear in the Inspector Controls sidebar. |
87 | 91 |
|
88 | | -### Manual install |
| 92 | +## Frequently Asked Questions |
89 | 93 |
|
90 | | -1. Download the plugin |
91 | | -2. Extract the contents of webberzone-code-block-highlighting.zip to wp-content/plugins/ folder. You should get a folder called webberzone-code-block-highlighting. |
92 | | -3. Activate the Plugin in WP-Admin under the Plugins screen |
| 94 | +Full FAQ is available on the [WordPress.org plugin page](https://wordpress.org/plugins/webberzone-code-block-highlighting/faq/). For support, use the [WordPress.org support forum](https://wordpress.org/support/plugin/webberzone-code-block-highlighting). |
93 | 95 |
|
94 | | -## Frequently Asked Questions |
| 96 | +__Does this plugin replace the core Code block?__ |
| 97 | +No. The plugin uses JavaScript and PHP filters to extend `core/code`. Deactivating it leaves behind valid, standard WordPress blocks. |
| 98 | + |
| 99 | +__Which languages are supported?__ |
| 100 | +35+ out of the box. Use the `wz_cbh_languages` filter to register additional Prism.js grammars. |
95 | 101 |
|
96 | | -Check out the [FAQ on the plugin page](https://wordpress.org/plugins/webberzone-code-block-highlighting/faq/). |
| 102 | +__Does Prism.js load on every page?__ |
| 103 | +No. Assets are only enqueued on pages containing at least one code block. Use `wz_cbh_force_load_assets` to override. |
97 | 104 |
|
98 | | -If your question isn't listed there, please create a new post at the [WordPress.org support forum](https://wordpress.org/support/plugin/webberzone-code-block-highlighting). It is the fastest way to get support as I monitor the forums regularly. |
| 105 | +__How do I highlight specific lines?__ |
| 106 | +Enter a comma-separated list of lines or ranges in the __Highlight Lines__ field in the sidebar (e.g. `1,3-5,8`). |
99 | 107 |
|
100 | | -## How can I report security bugs? |
| 108 | +## Development |
| 109 | + |
| 110 | +```bash |
| 111 | +# PHP |
| 112 | +composer install |
| 113 | +composer test |
| 114 | +composer phpcs |
| 115 | +composer phpstan |
| 116 | + |
| 117 | +# JS |
| 118 | +npm install |
| 119 | +npm run build # Production build -> includes/blocks/build/ |
| 120 | +npm run build:prism # Copy Prism themes -> includes/assets/ |
| 121 | +npm run build:assets # Minify generated CSS/JS assets |
| 122 | +npm run start # Watch mode for block/editor/frontend bundles |
| 123 | +npm run zip # Plugin zip |
| 124 | +``` |
| 125 | + |
| 126 | +## Contribute |
| 127 | + |
| 128 | +The plugin is open source and available on [GitHub](https://github.com/WebberZone/webberzone-code-block-highlighting). Pull requests for bug fixes and new features are welcome. |
| 129 | + |
| 130 | +Bug reports are [welcomed on GitHub Issues](https://github.com/WebberZone/webberzone-code-block-highlighting/issues). Please note GitHub is not a support forum — issues that are not qualified as bugs will be closed. |
| 131 | + |
| 132 | +## Security |
| 133 | + |
| 134 | +Report security vulnerabilities through the [Patchstack Vulnerability Disclosure Program](https://patchstack.com/database/vdp/webberzone-code-block-highlighting). The Patchstack team will validate, triage, and handle any reported vulnerabilities. |
| 135 | + |
| 136 | +## Translations |
| 137 | + |
| 138 | +Help translate the plugin into your language on [WordPress.org](https://translate.wordpress.org/projects/wp-plugins/webberzone-code-block-highlighting). See the [Translator Handbook](https://make.wordpress.org/polyglots/handbook/rosetta/theme-plugin-directories/) for guidance. |
| 139 | + |
| 140 | +## Other plugins by WebberZone |
101 | 141 |
|
102 | | -You can report security bugs through the Patchstack Vulnerability Disclosure Program. The Patchstack team help validate, triage and handle any security vulnerabilities. [Report a security vulnerability.](https://patchstack.com/database/vdp/webberzone-code-block-highlighting) |
| 142 | +* [Contextual Related Posts](https://wordpress.org/plugins/contextual-related-posts/) — Display fast, intelligent related posts to keep visitors on your site longer |
| 143 | +* [Top 10](https://wordpress.org/plugins/top-10/) — Track daily and total visits and display popular and trending posts |
| 144 | +* [WebberZone Snippetz](https://wordpress.org/plugins/add-to-all/) — Manage custom HTML, CSS and JS snippets across your site |
| 145 | +* [Knowledge Base](https://wordpress.org/plugins/knowledgebase/) — Create a knowledge base or FAQ section on your WordPress site |
| 146 | +* [Better Search](https://wordpress.org/plugins/better-search/) — Contextual search results sorted by relevance |
| 147 | +* [Auto-Close](https://wordpress.org/plugins/autoclose/) — Automatically close comments, pingbacks, trackbacks and manage revisions |
| 148 | +* [Popular Authors](https://wordpress.org/plugins/popular-authors/) — Display popular authors in a WordPress widget |
| 149 | +* [Followed Posts](https://wordpress.org/plugins/where-did-they-go-from-here/) — Show related posts based on what your visitors have already read |
0 commit comments