<commit_before># scriptie-talkie-embed

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

## How does this work

A good idea is to look at the [example
implementation](https://github.com/thlorenz/scriptie-talkie-embed/tree/master/example/blog), but it comes down to a few
single steps.

### Include code inside html

Any `textarea` with class `scriptie-talkie` will be converted into a scriptie-talkie, so the below is the minimum you
need.

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

### Activate scriptie-talkie

At this point you will need [browserify](https://github.com/substack/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:

```js
var scriptieTalkieEmbed = require('scriptie-talkie');
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.

### 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:

```html
<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.

```js
{ readonly  :  true|false
, width     :  override
, height    :  override<commit_msg>fixing readme<commit_after># scriptie-talkie-embed

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

## How does this work

A good idea is to look at the [example
implementation](https://github.com/thlorenz/scriptie-talkie-embed/tree/master/example/blog) and to [see the resulting
page](http://thlorenz.github.io/scriptie-talkie-embed/).

Getting this to work comes down to a few single steps.

### Include code inside html

Any `textarea` with class `scriptie-talkie` will be converted into a scriptie-talkie, so the below is the minimum you
need.

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

### Activate scriptie-talkie

At this point you will need [browserify](https://github.com/substack/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:

```js
var scriptieTalkieEmbed = require('scriptie-talkie');
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.

### 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:

```html
<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.

```js
{ readonly  :  true|false
, width     :  override
, height    :  override
{'fraction_non_alphanumeric': 0.0958970623937849, 'fraction_numerical': 0.0029133284777858705, 'mean_word_length': 4.15, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 11, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2691506', 'n_tokens_mistral': 1304, 'n_tokens_neox': 1236, 'n_words': 524}