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.

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

1.2.1

30 May 2024

Fixed

• Updating an existing code sample would remove the Linebreak display.

1.2.0

27 May 2024

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.