JExtBOX Code Display Documentation

This extension adds a functionality for insert code listing into articles easier than other extensions and display it with highlighting.

Author
Galaa
Home Page
Extension Home Page
JED Page
Page on The JED
Live Demo
demo.jextbox.com
Compatibility
Joomla 3.8+
Extension
component, plugin
Version
2.0.0 on 11 Apr 2018

This extension adds a functionality for insert code listing into articles easier than other extensions and display it with highlighting.

  • Integration with CodeSample plugin of TinyMCE that is default editor of Joomla
  • Powerful code highlighters: GeSHi, Prism and highlighter.js
  • No need to edit source code manually. No need to disable "email cloack" plugin.
  • Some important features of those highlighters: Line numbers, Themes and Styles
  • Front-end popup window that displays code as plain text
  1. Editor toolbar button for insert and edit code listing easily
  2. Most powerful code highlighters: GeSHi, Prism and highlighter.js
  3. Line numbers, Themes and Styles
  4. Front-end popup window that displays code as plain text
  5. Additional CSS and other useful parameters: default language etc.
  6. Integration with TinyMCE editor
  7. Supports previous 1.5.1 or older version's syntax for code listing

2.0.0. 2018-04-11. Additional highlighters, TinyMCE integration

1.5.1. 2017-01-19. Front-end editor has been supported.

1.5.0. 2016-04-23. Editor button has been added.

1.4.0. 2016-03-11. New parameter for add JS library dependencies. Code improvement.

1.3.0. 2015-01-27. Popup window bug has been solved for Joomla 3. New parameters.

1.2.0. 2013-11-16. Language file has changed. New option has added for jQuery duplication check. Fancybox has updated to v2.1.5. jQuery has updated to 1.9.0.

1.1.0. 2013-06-23. jQuery duplication check.

1.0.0. 2012-12-08. Initial release.

Usage

Insert code listing:

  1. Click where you want to insert your code listing.
  2. Click the toolbar button with icon like {;}. Then popup window will be opened.
  3. Type or paste your code and click Insert button.

Edit code listing:

  1. Click a code listing. It will be selected.
  2. Click the toolbar button with icon like {;}. Then popup window will be opened.
  3. Edit your code and click Ok button.

Delete code listing:

  1. Click a code listing. It will be selected.
  2. Click delete key on your keyboard.

Supported Languages

It depends from which code highlighter is selected by user. You can see the list of supported languages from following pages:

Configuration

You can configure this extension with core component com_config.

  1. Open "Global Configuration".
  2. Click "JExtBOX Code Display" on the sidebar. The configuration page will be opened.

Attention

When your code contains @ (at) signs and the email cloack plugin is enabled, you may will get strange results in your code listings. So this extension replaces all @ signs in all code listings with the HTML code to escape "email cloacking". But "JExtBOX Code Display" plugin which is type of content must be executed before the email cloack plugin. So if you get a cloacked email address (it is looks like very strange in the code listing), you need to check and set plugin order.

Known Issues

GeSHi line numbers are broken for some template.