Highlighted Code Blocks

Syntax highlighted code blocks for WordPress.

Overview

Highlighted Code Blocks is a lightweight WordPress plugin that provides syntax highlighting for code blocks built using highlight.js. It aims to improve code readability both in the editor preview are on the front-end.

Features

• Syntax highlighting for code blocks using highlight.js.
• Support for multiple languages.
• Theme support, easily switch any highlight.js themes.
• Minimal configuration, activate and it works.
• Structured using a namespaced plugin class and an autoloader for easy extension.

Installation

1. Copy the plugin directory highlight-code-blocks into your site's plugins directory:
   • wp-content/plugins/highlight-code-blocks/
2. Activate the plugin from the WordPress admin: Plugins → Installed Plugins → "Highlighted Code Blocks" → Activate.
3. If installing from GitHub, you can clone the repo into the plugins folder:
   • git clone https://github.com/DarkMatter-999/Syntax-Highlighted-Code-blocks.git wp-content/plugins/highlight-code-blocks

Development & Build

If you're installing or developing the plugin from the GitHub repository, the plugin may include front-end assets (CSS/JS) that need to be built before use. The standard workflow is to install Node dependencies and run the build script which outputs production-ready assets into the plugin directory.

# Clone the repository (optional location)
git clone https://github.com/DarkMatter-999/Syntax-Highlighted-Code-blocks.git highlighted-code-blocks
cd highlighted-code-blocks

# Install dependencies
composer install
npm install

# Build production assets
npm run build

# After build, install/copy the plugin into your site's plugins directory or activate from development site
# If you work directly in wp-content/plugins, run the build there so assets are in-place.

Notes:

• Node.js and npm: use a reasonably recent Node.js LTS (e.g. 16.x, 18.x or later) and matching npm. Check package.json for any specific engine requirements.
• The npm run build command should produce optimized CSS/JS in the plugin's build or dist folder (or wherever the project is configured to output assets). Ensure those files are present and enqueued by the plugin.
• For local development with a watch mode (if provided), use npm run start or the project's equivalent to rebuild on file changes.

Usage

• Add a Code block in the block editor.
• Enter your code and, when available, set the language in the block's settings.
• The plugin will apply syntax highlighting on the front-end. If your editor or theme supports preview of block markup, you may also see enhanced highlighting in the editor preview.

Notes:

• Highlighting depends on the block storing or providing a language attribute. If a language is not specified, highlighting may be generic or absent.

Developer Notes

Entry point:

• highlight-code-blocks/highlighted-code-blocks.php

This file:

• Defines plugin constants:
  • HCB_PLUGIN_PATH
  • HCB_PLUGIN_URL
• Loads the autoloader:
  • include/helpers/autoloader.php
• Bootstraps the plugin:
  • DM_Highlighted_Code_Blocks\Plugin::get_instance()

Code organization:

• The plugin uses a namespaced structure under DM_Highlighted_Code_Blocks. Look in the include/ folder for core classes, blocks, assets enqueuing, and utilities.
• Follow WordPress coding standards and best practices when extending or modifying the plugin.
• Prefer adding features via separate extensions or a custom plugin rather than editing core plugin files directly to make updates easier.

Troubleshooting

If highlighting does not appear or behaves incorrectly:

1. Confirm the plugin is active in the WordPress admin.
2. Ensure the code block has a language attribute (if the block supports it).
3. Check the page source for plugin assets (CSS/JS) being enqueued.
4. Clear caches (page cache, object cache, CDN) after activation.
5. Temporarily switch to a default theme and disable other plugins to isolate conflicts.
6. Look at browser console for JS errors that might prevent syntax highlighter initialization.

If you encounter a bug, include:

• WordPress version
• PHP version
• Theme name
• Steps to reproduce
• Any console errors or server logs

Open an issue on the repository with the details above.

Contributing

Contributions are welcome. Please follow repository guidelines if available:

• Fork the repo and create a feature branch.
• Follow WordPress PHP and JavaScript coding standards.
• Include clear commit messages and update README or inline docs as needed.
• Submit a pull request with a description of changes and rationale.

License

This plugin is released under the GNU General Public License v2 (or later).

Changelog

1.0.0

• Initial release: basic syntax highlighting for code blocks, autoloader and main plugin bootstrap.