2.0.1 • Published 5 years ago
executor-editor v2.0.1
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
Add CSS class
executor-editor
to HTML element:<pre class="executor-editor"> class Cake { toString() { return '[Cake]'; } } console.log(String(new Cake())); </pre>
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