View on GitHub

Scriptie-talkie-embed

Embeds scriptie-talkie in any html page, for instance blog posts, to provide interactive code samples.

scriptie-talkie-embed

Embeds scriptie-talkie in any html page, for instance blog posts, to provide interactive code samples.

blog post example

source of this example

Use it to demonstrate interesting aspects of JavaScript, i.e. Object.freeze:

Readers can edit the code and even get the convenience of error or warning annotations right in the editor.

By default the size will be determined to make the terminal (on the right side) fit all of its contents.

However you may also size it to just fit the editor on the left by setting the data-scriptie-talkie attribute to { sizeToEditor: true }.

In that case the terminal can be scrolled up and down in order to inspect all its content.

How does this work

A good idea is to look at the example implementation and to see the resulting page.

All the work is done client side. All you need to do is to follow the simple steps below to properly include your code samples and the scriptie talkie JavaScript file itself. .

Include code inside html

Any textarea with class scriptie-talkie will be converted into a scriptie-talkie, so this is the minimum you need:

<textarea class="scriptie-talkie">
  var o = Object.create({a : 1})
  o.a = 2;
  Object.freeze(o)
  o.a = 1; 
  o
</textarea>

Activate scriptie-talkie

browserify

It is recommended to use browserify in order to include scriptie-talkie in your bundle.

So lets assume you have a build script that specifies main.js as an entry, all you'd need to do there is:

var scriptieTalkieEmbed = require('scriptie-talkie-embed');
scriptieTalkieEmbed();

Make sure to execute the last line only once the page has loaded or just include the bundle at the bottom of your script as in the example I mentioned above.

It will then go and convert all your customized textareas into scriptie-talkies.

script tag

Alternatively you can include the following script tag in the body of your html file followed by an inline script that activates scriptie-talkie:

<script type="text/javascript" src="https://github.com/thlorenz/scriptie-talkie-embed/raw/gh-pages/gh-pages/bundle.js"></script>
<script type="text/javascript">
  window.scriptieTalkieEmbed();
</script>

Customize each scriptie-talkie

Customization is done via a data-scriptie-talkie property that may be added to each textarea.

So far only the following is supported: { sizeToEditor: true|false }, the default being false. Lets look at the above example again and this time add this customization:

<textarea class="scriptie-talkie" data-scriptie-talkie='{ sizeToEditor: true }'>
  var o = Object.create({a : 1})
  o.a = 2;
  Object.freeze(o)
  o.a = 1; 
  o
</textarea>

As you can see the config gets passed as a plain JavasScript object literal.

Future Features

More config options, particularly related to the sizing of the embedded scriptie-talkie.

{ readonly  :  true|false
, width     :  override
, height    :  override
, maxheight :  override
}