<commit_before># LabKit JS

LabKit is a simple JavaScript library that helps build web pages with live CSS and HTML examples (a DSL for web experiments).
The main functionality is provided by a set of tags that can be added to any HTML page.
For example, the `<lk-css-html-example>` tag renders the given CSS and HTML code-examples and then inserts them into the document, for a live rendering of the example.
To help organize the experiments, the `<lk-table-of-contents>` tag can be used to automatically generate a Table of Contents for the page.

## Demo

[CSS Lab](http://www.thruzero.com/pages/jcat3/css-lab/index.html)

## Tags

### ‣ CSS and HTML Example tag

The `<lk-css-html-example>` tag renders the CSS and HTML code as examples, and then injects them into the DOM, so they will be rendered live.
The code examples use code templates, identified by the cssTemplateId and htmlTemplateId attributes.

The following example uses separate IDs for the CSS and HTML code templates:

```xml
<lk-css-html-example cssTemplateId="basicBoxModelCss" htmlTemplateId="basicBoxModelHtml">
</lk-css-html-example>
```

This example renders only the HTML portion (since the CSS ID is missing):

```xml
<lk-css-html-example htmlTemplateId="tmplExampleRelInStaticNoMarginHtml">
</lk-css-html-example>
```
<commit_msg>Added link to JSDoc, from README.<commit_after># LabKit JS

LabKit is a simple JavaScript library that helps build web pages with live CSS and HTML examples (a DSL for web experiments).
The main functionality is provided by a set of tags that can be added to any HTML page.
For example, the `<lk-css-html-example>` tag renders the given CSS and HTML code-examples and then inserts them into the document, for a live rendering of the example.
To help organize the experiments, the `<lk-table-of-contents>` tag can be used to automatically generate a Table of Contents for the page.

## Demo

[CSS Lab](http://www.thruzero.com/pages/jcat3/css-lab/index.html)

## JSDoc

[LabKit JSDocs](http://www.thruzero.com/pages/jcat3/css-lab-jsdoc/index.html)

## Overview of LabKit Tags

### ‣ CSS and HTML Example tag

The `<lk-css-html-example>` tag renders the CSS and HTML code as examples, and then injects them into the DOM, so they will be rendered live.
The code examples use code templates, identified by the cssTemplateId and htmlTemplateId attributes.

The following example uses separate IDs for the CSS and HTML code templates:

```xml
<lk-css-html-example cssTemplateId="basicBoxModelCss" htmlTemplateId="basicBoxModelHtml">
</lk-css-html-example>
```

This example renders only the HTML portion (since the CSS ID is missing):

```xml
<lk-css-html-example htmlTemplateId="tmplExampleRelInStaticNoMarginHtml">
</lk-css-html-example>
```

{'fraction_non_alphanumeric': 0.08739985433357611, 'fraction_numerical': 0.0010924981791697013, 'mean_word_length': 4.711018711018711, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 17, 'https://': 0, 'lorem ipsum': 0, 'www.': 3, 'xml': 4}, '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': '1104986', 'n_tokens_mistral': 827, 'n_tokens_neox': 775, 'n_words': 355}