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 exampleUse 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 textarea
s 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
}