1. Introduction
js-code-runner is a lightweight JavaScript library that makes js/HTML/CSS snippets on your website runnable inline. The library puts js-HTML-CSS codes in separate tabs and attaches 'run' button that will run that snippet in iframe container.
2. Plugin Overview
Library | js-code-runner |
Author | Marcin Wojtysiak |
Licence | MIT Licence |
Repository | https://github.com/martinwojtus/js-code-runner |
3. How to install js-code-runner library:
Follow the below steps to install js-code-runner on your website.
3.1. If you want to have all the features the best way to install this library is to download codes from GitHub (https://github.com/martinwojtus/js-code-runner), change the public path
from webpack.config.js to the path where you copy all necessary scripts on your website, and build it running:
3.2. Include styles and main JavaScript of the library:
If you are using code styling libraries like PrismJS
or Highlight.js
just make sure you put view.jcr.js script before them.
3.3. Create some snippet in DIV element with js-code-runner
class:
3.4. Initialize the plugin by calling JsCodeRunner
function:
3.5. After initialization the output will be as following:
class App extends React.Component {
state = {
count: 0
}
inc = () => this.setState({
count: this.state.count + 1
})
dec = () => this.setState({
count: this.state.count - 1
})
render() {
return (
<div>
<h2>{ this.state.count }</h2>
<button onClick={this.inc}>Increment</button>
<button onClick={this.dec}>Decrement</button>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))
<video id="sample-view" style="width:600px;max-width:100%;" controls="">
<source src="https://frontbackend.com/storage/snippets/sample-movie.mp4" type="video/mp4">
<source src="https://frontbackend.com/storage/snippets/sample-movie.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
document.getElementsByClassName('sample-view').addEventListener('ended', function () {
console.log('ended');
},false);
3.6. Available options:
If you want to add external resources to your snippet add below attributes to your container (DIV that has js-code-runner
class):
JsCodeRunner()
function takes additional parameters to handle ES6, Pug, Typescript, Sass and other snippets:
4. Conclusion
In this article, we presented js-code-runner library that makes js, HTML and CSS codes runnable, which means you can showcase how snippets work on your website easily.
{{ 'Comments (%count%)' | trans {count:count} }}
{{ 'Comments are closed.' | trans }}