Skulpt Runner

Brython Coderunner transforms your Markdown fields and textareas into an executable IDE. You can execute code immediately and even use Turtle or Processing inside the IDE.

Demo (german):

My Homepage | See Test Folder

Usage

With the following code you can integrate skulpt_runner into your website:

<script> requirejs.config({ paths: { "marked": "https://cdn.jsdelivr.net/npm/marked/lib/marked", "skulpt_runner": "../src/skulpt_runner", } }) require(["marked"], function(marked) { document.querySelector("body").innerHTML = marked(document.querySelector(".marked").innerHTML); var path = "../" requirejs.config({ paths: { "skulpt_runner": path + "src/skulpt_runner", } }) requirejs(["skulpt_runner"], function(sr) { console.info("before init", sr); sr(path); }); }); </script>

The code converts all tags with the .marked class to Markdown and automatically creates a skulpt_runner IDE for code fields with the following form:

```skulpt_runner
[python_code]
```

Skulpt_runner without markdown

Code fields with the following classes are transformed in IDES:

<code class="language-skulpt_runner>
</code>

or

<code class="skulpt_runner">
</code>

Textareas can also be converted. To do this, the textareas must be enclosed by a div in the following form:

<div class="skulpt_textarea">
<textarea>
</textarea>
</div>

Settings

Settings can be passed to customize the appearance and functionality. The most elegant way to do this is to pass a JSON field right after the opening tag:

<code class="skulpt_runner">
{options="processing buttons editor"}
</code>

Variables

• options:

  • editor: Displays the editor.

  • buttons Displays buttons (Run, Clear).

  • canvas Displays a canvas where code can be rendered.

  • processing: Loads the code as processing code.

  • turtle / Transforms import turtle in brython (loads libraries and turtle-canvas) (alpha)

• display:

  • sketch: Hides code.

  • fullscreen: Shows IDE in fullscreen

• preset:

  • processing: Set options to editor buttons canvas processing

  • turtle: Set options to editor buttons canvas processing

Moodle integration

You can use Brython Coderunner as moodle database activity (future) or embed it with a moodle-text-block. See moodle directory. (Currently the block must be embed in admin->additionalhtml->Before end of Body)