Skip to content

Commit 4b79f82

Browse files
committed
Update README and readme.txt with comprehensive feature documentation, installation instructions, and expanded FAQ section
1 parent e83ae51 commit 4b79f82

3 files changed

Lines changed: 213 additions & 113 deletions

File tree

CLAUDE.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ The current implementation follows the active plan in `PLAN.md`, not the broader
3030
- `lineNumbersStart`
3131
- `wordWrap`
3232
- `title`
33+
- `_legacyTitle` — read-only migration attribute; copies `title` from old `code-syntax-block` format on first load, then clears itself
3334
- `highlightLines` — maps to `data-line` on `<pre>`, consumed by Prism line-highlight plugin
3435
- `maxHeight` — inline `style="max-height:{n}px;overflow-y:auto"` on `<pre>` (CSS only, no Prism)
3536
- Adds Inspector Controls for:
@@ -53,7 +54,12 @@ The current implementation follows the active plan in `PLAN.md`, not the broader
5354
- color scheme
5455
- copy to clipboard
5556
- show language label
57+
- show file name
5658
- default language
59+
- default line numbers toggle
60+
- default line numbers start
61+
- default word wrap
62+
- font size
5763
- Ships with `One Dark` as the default theme slug: `prism-onedark`
5864

5965
Do not assume features from `OLD-FEATURE-PLAN.md` exist unless they are implemented in code.

README.md

Lines changed: 98 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -8,95 +8,142 @@
88

99
__Requires:__ 6.6
1010

11-
__Tested up to:__ 6.7
11+
__Tested up to:__ 6.9
1212

1313
__Requires PHP:__ 7.4
1414

1515
__License:__ [GPL-2.0+](http://www.gnu.org/licenses/gpl-2.0.html)
1616

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/)
1818

1919
Add beautiful syntax highlighting to the Gutenberg Code block — powered by Prism.js with 18 themes and 35+ languages, zero configuration required.
2020

2121
## Description
2222

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

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

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?
3428

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

37-
The plugin uses three layers of integration with the block editor:
35+
### Supported languages
3836

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

43-
### Developer filters
39+
### Included themes (18)
4440

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+.
4842

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

51-
WebberZone Code Block Highlighting does not collect personal data or communicate with external services.
52+
### Global settings
5253

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
5461

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
5663

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
5867

59-
### Translations
68+
### GDPR
6069

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

6372
## Screenshots
6473

6574
More screenshots are available on the [WordPress plugin page](https://wordpress.org/plugins/webberzone-code-block-highlighting/screenshots/).
6675

67-
## Other plugins by WebberZone
76+
## Installation
6877

69-
WebberZone Code Block Highlighting is one of the many plugins developed by WebberZone. Check out our other plugins:
78+
### WordPress admin (recommended)
7079

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__.
7983

80-
## Installation
84+
### Manual installation
8185

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__.
8389

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

88-
### Manual install
92+
## Frequently Asked Questions
8993

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).
9395

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

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

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`).
99107

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
101141

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

Comments
 (0)