It's easy to turn any HTML element into a 'runnable' element just by referencing the snapcode.js script and adding a one line <script> tag. The resulting SnapCode frame is also editable with full IDE features.

Here is an example of this running in a simple tutorial page: learn_java.html.

Here is an example of a snippet of HTML that defines some code inside a <pre> tag (to preserve newlines). Its is followed by a <script> tag that calls snapcode.js to add a 'play button' that replaces the <pre> tag with a SnapCode frame.

  <pre id='code-sample-1'>
    IO.print("Hello World");
  </pre>

  <script type='module'>
      import SnapCode from './snapcode.js';
      SnapCode.addPlayButtonToElementForId('code-sample-1');
  </script>

The only dependency is snapcode.js. This can be downloaded or referenced directly. If downloaded to run from your own server, you will also need lz-string-min.js

snapcode.js: https://reportmill.com/shared/snapcode.js

lz-string-min.js: https://reportmill.com/shared/lz-string.min.js