Introduction
Easy Code Highlighter is a Joomla plugin that allows you to highlight code snippets on your Joomla site with customizable themes and line numbers. This documentation covers the installation, configuration, and usage of the Easy Code Highlighter plugin.
Installation
Downloading the Extension
Email: After you purchase the extension from our store, you will receive an email containing a link to download the extension.
Store: Alternatively, you can download the extension from the "Downloads" section in our store. If you are a new user, you need to create an account using the same email address you used for the purchase.
Click to download the extension package: EasyCodeHighlighter_UNZIP.zip
Unzipping the Package
Use any file unzipper tool or WinRAR to unzip the EasyCodeHighlighter_UNZIP.zip package. After unzipping, you will find the following contents:
- Folder Joomla 3 & 4: The extension is also designed for seamless integration with Joomla 3.x and Joomla 4.x. This folder contains the installation file named
plg_sys_easycodehighlighter_X.x.zip
. - ReadMe.txt: Contains vital information about the current version of the extension.
Installing the Extension
To install the extension, log in to the backend of your Joomla website.
- For Joomla 3: Navigate to Extensions > Extension Manager, then click on the "Upload Package File" tab. Click "Browse" to select the appropriate installation file (
plg_sys_easycodehighlighter_X.x.zip
), then click "Upload and Install." - For Joomla 4 : Go 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.
Configuration
After installation, the plugin needs to be configured to suit your requirements. Access the plugin settings by navigating to Extensions > Plugins, and find System - Easy Code Highlighter in the list.
General Settings
- Line Number: Show line numbers or not.
- Options:
Yes
,No
- Default:
No
- Options:
- Theme: Select your desired theme for the code highlighter.
- Options:
Default
,Django
,Eclipse
,Emacs
,FadeToGrey
,MDUltra
,Midnight
,RDark
- Default:
Default
- Options:
How to Use
To highlight code snippets, use the following syntax in your Joomla articles or custom HTML modules:
{code}code_to_be_highlighted{lang}code_language{highlight}lines_of_code_to_be_highlighted{end-code}
Example:
{code}
<?php
echo "Welcome to PHP";
// cleaning out the code.
if($portal_small_code && !\$portal_gzcompress) {
$buf = str_replace(" ", "", $buf);
$buf = str_replace(" ", "", $buf);
$buf = str_replace(chr(13), "", $buf);
}
?>
{lang}php{highlight}4,7{end-code}
In the example above, lines 4 and 7 are highlighted.
Features
Once configured, the plugin will automatically highlight code snippets on your Joomla site based on the specified settings. You can add code snippets to your articles or custom HTML modules using the provided syntax.
Features
- Customizable Themes: Choose from multiple themes for the code highlighter.
- Line Numbers: Option to show or hide line numbers.
- Syntax Highlighting: Supports multiple programming languages for syntax highlighting.
- Easy Integration: Easily add code snippets to articles or custom HTML modules.
FAQ
-
How do I enable line numbers?
- Set the Line Number option to
Yes
under General Settings.
- Set the Line Number option to
-
How do I change the theme of the code highlighter?
- Select your desired theme from the Theme dropdown under General Settings.
-
What is the syntax for adding code snippets?
- Use the
{code}code_to_be_highlighted{lang}code_language{highlight}lines_of_code_to_be_highlighted{end-code}
syntax in your Joomla articles or custom HTML modules.
- Use the
-
Which programming languages are supported?
- The plugin supports multiple programming languages including JavaScript, PHP, HTML, CSS, and more.
Troubleshooting
- Code Snippets Not Highlighting: Ensure the plugin is enabled and the syntax is correctly added to your articles or modules.
- Line Numbers Not Showing: Check the Line Number setting and ensure it is set to
Yes
. - Theme Not Applying: Verify that the selected theme is available and correctly set in the Theme dropdown.