Get Started

Easy Code Highlighter is a complete Joomla extension package that provides a comprehensive solution for managing and displaying code snippets on your website. This package includes both a backend component for managing code snippets and a system plugin for processing shortcodes and displaying highlighted code.

Component: Full backend administration interface for creating, editing, and managing code snippets. Each snippet automatically generates a unique shortcode for easy insertion.

System Plugin: Automatically processes [codehighlight id=X] shortcodes in your content and displays code snippets with beautiful syntax highlighting.

Both extensions work together seamlessly - create snippets in the component, copy the shortcode, and paste it anywhere in your content. The plugin automatically processes the shortcode and displays your code with professional syntax highlighting.

Downloading the Package

After you purchase the extension from our store, you will receive an email containing a link to download the package file: pkg_easycodehighlighter.zip

Alternatively, you can download the extension from the "Downloads" section in our store.

Installing the Package

To install the package, log in to the backend of your Joomla website.

• For Joomla 4, 5 & 6: Navigate to System > Install > Extensions. You can either drag and drop or browse for the file to install.

A success message will be displayed once the installation is complete. The package includes:

• Component - Easy Code Highlighter: Backend interface for managing code snippets
• System Plugin - Easy Code Highlighter: Processes shortcodes and displays highlighted code

After Installation

The system plugin is automatically enabled after installation. You can start creating code snippets immediately:

• Go to Components > Easy Code Highlighter > Code Snippets
• Click "New" to create your first code snippet
• Copy the generated shortcode and use it in your content

Creating a New Code Snippet

Navigate to Components > Easy Code Highlighter > Code Snippets and click the "New" button.

Required Fields

• Title: Enter a descriptive title for your code snippet (e.g., "PHP Array Example")
• Language: Select the programming language from the dropdown (PHP, JavaScript, CSS, HTML, etc.)
• Code: Paste your code in the code textarea

Optional Fields

• Highlight Lines: Enter line numbers to highlight (e.g., "1,3,5" or "10-15")
• Status: Set to Published to make it available for use

Saving and Getting Shortcode

After saving, you'll see the shortcode in the list view (e.g., [codehighlight id=1]). Copy this shortcode and paste it anywhere in your content.

Supported Languages

The component supports 20+ programming languages: PHP, JavaScript, CSS, HTML, XML, Java, Python, SQL, Bash, C++, C#, Ruby, Perl, PowerShell, SASS, Scala, VB.NET, and Plain Text.

Shortcode Format

The shortcode format is simple: [codehighlight id=X] where X is the ID of your code snippet.

Where to Use Shortcodes

• Articles: Add shortcodes directly in article content (use HTML view if using WYSIWYG editor)
• Modules: Add shortcodes in Custom HTML modules
• Custom HTML: Use in any content area that supports HTML
• Templates: Add shortcodes in template overrides or custom HTML areas

Shortcode Examples

• Basic Usage: [codehighlight id=1]
• Multiple Snippets: You can use multiple shortcodes on the same page
• In Articles: Paste the shortcode anywhere in your article content

Finding Snippet IDs

The snippet ID is displayed in the Code Snippets list view. You can also see it in the shortcode column. The ID is automatically assigned when you create a snippet.

Copying Shortcodes

In the Code Snippets list view, you'll see a "Shortcode" column with the shortcode for each snippet. Click the copy button or manually copy the shortcode.

Configuring the Plugin

Navigate to Extensions > Plugins > System - Easy Code Highlighter to configure global settings.

General Settings

• Gutter: Enable or disable line numbers (gutter) for all code snippets
• Theme: Select the default syntax highlighting theme (Default, Django, Eclipse, Emacs, FadeToGrey, MDUltra, Midnight, RDark)
• Copy Button: Enable or disable the copy to clipboard button for all snippets

How to Use Instructions

The plugin configuration includes a "How to Use" section that explains:

• How to create code snippets in the component
• How to use the shortcode format
• Where to insert shortcodes

Settings Apply Globally

Plugin settings apply to all code snippets displayed on your site. Individual snippets can still have their own language and highlight lines settings, but theme, gutter, and copy button are controlled globally.

Preview

The plugin includes a preview section showing how your code will look with the selected theme and settings.

Key Features

Code Snippet Management

• Create, edit, and manage unlimited code snippets
• Automatic shortcode generation for each snippet
• Full backend administration interface
• Search and filter capabilities
• Bulk operations support

Syntax Highlighting

• Support for 20+ programming languages
• Multiple highlighting themes
• Professional syntax highlighting using Prism.js
• Language-specific highlighting
• Accurate code parsing

Shortcode System

• Simple format: [codehighlight id=X]
• Works anywhere HTML is supported
• Multiple snippets on same page
• No coding knowledge required

Customization Options

• Line numbers (gutter) option
• Highlight specific lines
• Theme selection
• Copy to clipboard button
• Global and per-snippet settings

User Experience

• Copy to clipboard button
• Responsive design
• Mobile-optimized
• Touch-friendly interactions
• Professional code display

Technical Features

• Joomla 4, 5 & 6 compatible
• Modern PHP 8.0+ code
• Security enhanced
• Performance optimized
• Responsive design

• How do I create a code snippet?

  • Go to Components → Easy Code Highlighter → Code Snippets, click "New", fill in the form, and save. Copy the generated shortcode.

• How do I use the shortcode?

  • Paste [codehighlight id=X] anywhere in your content (articles, modules, custom HTML). Replace X with your snippet ID.

• Where can I find the snippet ID?

  • The ID is shown in the Code Snippets list view and in the shortcode column. It's automatically assigned when you create a snippet.

• Can I use multiple shortcodes on the same page?

  • Yes, you can use multiple shortcodes on the same page to display different code snippets.

• How do I highlight specific lines?

  • In the code snippet form, enter line numbers in the "Highlight Lines" field (e.g., "1,3,5" or "10-15").

• Can I change the theme?

  • Yes, go to Extensions → Plugins → System - Easy Code Highlighter and select a theme from the dropdown.

• Why isn't my code displaying?

  • Check that the plugin is enabled, verify the shortcode syntax is correct, ensure you're viewing the page (not editing), and check that the snippet is published.

• Can I disable the copy button?

  • Yes, go to plugin settings and disable the "Copy Button" option.

• Code Not Displaying: Ensure the plugin is enabled, verify shortcode syntax is correct ([codehighlight id=X]), check that you're viewing the page (not editing), verify the snippet is published, and check browser console for JavaScript errors.
• Shortcode Not Working: Check that you're using the exact syntax [codehighlight id=X], ensure you're in HTML view if using WYSIWYG editor, verify System Plugin is enabled, check for typos in the shortcode, and ensure the snippet ID exists.
• Syntax Highlighting Not Working: Verify the language is selected correctly, check that Prism.js assets are loading (check browser console), ensure theme is selected in plugin settings, and verify no JavaScript errors.
• Copy Button Not Working: Check browser console for errors, ensure copy button is enabled in plugin settings, verify JavaScript is enabled in browser, and check for conflicts with other extensions.
• Styling Issues: Clear Joomla cache, check for CSS conflicts with your template, verify Prism.js CSS is loading, and check browser console for CSS errors.
• Line Numbers Not Showing: Ensure "Gutter" option is enabled in plugin settings, check that the theme supports line numbers, and verify no CSS is hiding the line numbers.
• Highlight Lines Not Working: Verify line numbers are entered correctly (e.g., "1,3,5" or "10-15"), check that the line numbers exist in your code, and ensure the format is correct.
• Multiple Snippets: All snippets on the same page use the same plugin settings (theme, gutter, copy button). Each snippet can have its own language and highlight lines.