This filter takes HTML elements and applies Ace elements and code interaction and editing options through CodeRunner. Therefore, you can apply syntax highlighting and code execution to pages throughout Moodle, allowing students to interact freely with code quizzes with non-CodeRunner questions (such as description questions), Text and media areas on the front page, and other locations which allow HTML editing.

Uses of this filter include demonstrating code throughout Moodle and in questions, and allowing students to interact, modify and play around with code outside of CodeRunner questions. Useful as a playground for students and a coding learning tool. 

Features which could be implemented with this function include being able to transform input code, graph, display syntax highlighting, take input from specified text boxes and include in running code and more.

This filter can be used in conjunction with the new TinyMCE (as of Moodle 4.1) editor's Code Sample feature, allowing easy code editing and modification with minimal HTML editing. Otherwise, full functionality by editing HTML directly for advance levels of code customisation are available. All customisations are listed in the ReadMe linked at the bottom of this box.

The plugin provides two separate filter operations:

1. Syntax highlighting (highlight): HTML <pre> elements with an attribute of data-ace-highlight-code are displayed using the JavaScript Ace code editor in read-only mode. This provides syntax colouring of the code.

2. Code execution (interactive): HTML <pre> elements with an attribute of data-ace-interactive-code are also displayed using the Ace code editor, but with editing enabled. In addition, a button labelled by default Try it! allows the student to execute the current state of the code and observe the outcome. With sufficient ingenuity on the part of the author, graphical output and images can be displayed, too (this option requires the author to edit the raw HTML). By adding additional html elements and linking the <pre> element to them, the author can allow users to enter standard input to the run and even upload files.

It should be noted that the 'interactive' elements are interactive only in the sense that the user can edit and run them; the user cannot interact with the code whilst it is running. However, the code can be modified between executions. As this implementation is a filter, data is not stored persistently, and any changes to the code whilst the filter is activated will not be stored.

The plugin requires the CodeRunner plugin to be installed first, since that furnishes the Ace editor required for filter operations. CodeRunner version 4.2.3 and Moodle 3.11 or later is required for basic functionality, although some errors may not display properly.

It is recommended to use CodeRunner version 5.1+ in conjunction with Moodle 4.1 for full functionality.

In addition, the ace-interactive-code filter requires that the system administrator has enabled the CodeRunner sandbox web service which is disabled by default. The Try it! button send the code from the Ace editor to the CodeRunner sandbox (usually a Jobe server) for execution using that web service.

As this plugin runs through CodeRunner and its respective server, supported execution languages are those from its server.

There is a page demonstrating the use of this filter on the CodeRunner site:

Ace inline demo

Please read the ReadMe on https://github.com/trampgeek/moodle-filter_ace_inline for further information including a list of all current features and customisations.

This plugin was developed by Richard Lobb (CodeRunner creator) and Michelle Hsieh (his summer student) and ongoing maintenance and support will be provided through: https://coderunner.org.nz/