executor-editor

executor-editor

:hammer: Display and evaluate your JavaScript code.

Demo 🎉

https://piecioshka.github.io/executor-editor/demo/

Features

• :white_check_mark: Embed any programming code
• :white_check_mark: Highlight JavaScript syntax
• :white_check_mark: Auto-evaluate the JavaScript code
• :white_check_mark: Execute code on demand
• :white_check_mark: Layout modes: horizontal, vertical
• :white_check_mark: Multiple instance on single page
• :white_check_mark: Support skins
• :white_check_mark: Display errors in red color

Installation

npm install executor-editor

or

bower install executor-editor

Usage

1. Add CSS class executor-editor to HTML element:

   <pre class="executor-editor">
   class Cake {
       toString() {
           return '[Cake]';
       }
   }
   
   console.log(String(new Cake()));
   </pre>
   

2. Add on the bottom of page, example before </body>

   <link href="/path/to/executor-editor/dist/executor-editor.css"/>
   <link href="/path/to/executor-editor/dist/skins/blue-skin.css"/>
   <link href="/path/to/executor-editor/dist/skins/normal-skin.css"/>
   
   <script src="/path/to/executor-editor/dist/executor-editor.js"></script>
   <script>ExecutorEditor.setup();</script>
   

API

All settings you can pass by HTML attributes.

data-autoevaluate

• Default: true

• Options: true | false

• Example:

  <pre class="executor-editor" data-autoevaluate="false">
      [...]
  </pre>
  

data-autofocus

• Default: true

• Options: true | false

• Example:

  <pre class="executor-editor" data-autofocus="true">
      [...]
  </pre>
  

data-skin

• Default: normal

• Options: normal | blue

• Example:

  <pre class="executor-editor" data-skin="blue">
      [...]
  </pre>
  

Purpose

The project was created for presentation slides, to embed code and quickly execute it.

License

The MIT License @ 2015-2019