Code Sample
| Version | 2.0.0 |
| Released On | |
| Updated On | |
| File Size | 51.35 Kb |
| MD5 Signature | 25e930a3903471dec5a3f07288fc7cd2 |
| Licence | GNU General Public License, Version 2 or later |
The Code Sample plugin for JCE is a specialized tool for inserting and displaying code snippets in site content. With optional styling using the Prism library, allowing for enhanced visual presentation of code blocks.
Installation
Install using the Joomla Extensions Installer - https://docs.joomla.org/Installing_an_extension
After installation, assign the plugin to an Editor Profile in Editor Profiles -> Features & Layout by dragging the icon into an editor toolbar row.
Configuration
In Joomla 4 or later, with JCE Pro 2.9.50 or later, the plugin can load the Prism Syntax Higlighter, which is used to highlight and style code inserted by Code Sample in the editor, into the front-end of your site. This can be enabled in the plugin's parameters in System -> Manage -> Plugins, by setting the Load Prism Assets to Yes. An optional URL to an alternate Font Awesome version can also be set.
Parameters
As of version 1.2.0, alternative external Prism Script and Prism CSS assets can be used to process and display CodeSample code in the editor and on the site front-end. These URLs can be set in Editor Profiles -> Plugin Parameters -> Code Sample.
Prism Script URL
- Description: Set an external URL for the Prism Script to use instead of the included files.
- Usage: This allows for adding languages not included in the core package.
- Configuration: Prism files can be configured and downloaded from the Prism site.
Prism CSS URL
- Description: Set an external URL for the Prism CSS to use instead of the included files.
- Usage: This enables styling for the additional languages added via the external Prism Script.
- Configuration: Prism files can be configured and downloaded from the Prism site.
Languages
-
Description: Add additional languages for CodeSample to support.
-
Usage: This parameter allows you to set additional languages such as C++, C#, Python, etc.
-
Configuration:
-
These languages will be added to the Languages list in the CodeSample dialog.
-
Requires configuring, downloading, and setting the Prism Script URL and Prism CSS URL as defined above.
Global Options
These global options configure how code blocks using the Code Sample plugin are rendered on the front-end of your site. These options can be set in System -> Manage -> Plugins -> CodeSample
Load Prism Assets
Option: Yes / No
Description:
Enables or disables loading of the PrismJS script and stylesheet on the site front-end. This must be enabled unless you are loading custom or external Prism assets.
Custom Prism Script
Field: URL
Description:
Specify a custom URL to load the Prism JavaScript file. Leave blank to use the default bundled script. Useful if you want to load a custom or CDN-hosted version.
Custom Prism CSS
Field: URL
Description:
Specify a custom URL to load the Prism CSS file. Leave blank to use the default bundled stylesheet. Useful for applying a custom theme or hosted version of Prism CSS.
Copy to Clipboard
Option: Yes / No
Description:
Enables the Copy to Clipboard button for code blocks on the front-end. When enabled, users can click to easily copy the displayed code.
Show Labels
Option: Yes / No
Description:
Show or hide labels (text) on code display buttons, such as the Copy button. When disabled, only icons will be shown.
Copy to Clipboard Text
Field: Text (default: Copy)
Description:
Custom text displayed on the Copy to Clipboard button. Leave blank to use the default "Copy" label.
Copy to Clipboard Title Text
Field: Text (default: Copy to Clipboard)
Description:
Text shown as the button tooltip (title attribute). Leave blank to use the default "Copy to Clipboard".
Copied to Clipboard Text
Field: Text (default: Copied!)
Description:
Text displayed to confirm that code was successfully copied to the clipboard. Leave blank to use the default.
Copy Error Text
Field: Text (default: Press Ctrl+C to copy)
Description:
Text displayed when clipboard copying fails (usually due to browser restrictions). Leave blank to use the default message.
Usage
Click the Code Sample button in the editor toolbar to open the dialog. Select the code Language, eg: Javascript, then type or paste in the code you want to display then click Insert.
To edit the code, click on it to select it, then click the highlighted Code Sample button in the editor toolbar. Make any changes as required and click Update.
Changelog
2.0.0
Added
- Added a Copy to Clipboard option in the plugin parameters to show a "Copy" button in the code block to copy the code contents to the clipboard.
- Additional Custom Languages can now be added for selection in the CodeSample dialog. When using Custom Languages, custom Prism Script and CSS files must be set in the profile and plugin parameters that support these languages.
Fixed
- Fixed missing config.php file in installation package which prevented parameters from being applied.
- Inserting a new Code Sample block would create paragraphs above and below the block.
- Fixed a layout issue in some templates relating to the .tag class
- Fixed Custom Languages addition.
- Add css override for borders on
<pre>and<code>tags. - Add css override to remove background color from operators.
1.2.1
Fixed
- Updating an existing code sample would remove the Linebreak display.
1.2.0
Added
External Prism Script URL and Prism CSS URL:
- You can now set an external Prism Script URL and Prism CSS URL to use instead of the included files.
- This can be used to add other languages not included in the core package. Supported languages include: markup, css, clike, javascript, bash, json, markup-templating, php, powershell, sql, yaml.
- Prism files can be configured and downloaded from the Prism site
New Languages Option:
- Allows you to set additional languages for CodeSample to support, e.g., C++, C#, etc. This will also require you to configure, download, and set the Prism Script URL and Prism CSS URL as defined above.