Click to show TOC

Added DIV creation tool

# Why TryITjs

### Problem Statement

I have a Javascript library on github and I wanted to make a tutorials for it. I can certainly create .md pages easily and that's great. But the reader cannot actually play with the sample code, explore the options and gain confidence that the library will be useful to the reader.

- Github repository only allows .md (markdown) file to be rendered on the site
  - For security reasons, no javascript is allowed.
- HTML files are only displayed for editing not rendered as a HTML markup for the browser
- Github pages allow html file to be rendered, but there is no backed processing, so Jupyter Notebooks cannot be served from there
- Understandably there is no facility to run your own backend server.
- Markdown is great for just text documentation, but it has no facility to use Javascript on those pages (security concern)

I wanted HTML file that provides features similar to Jupyter with fewer frills and only the Javascript code snippets can be edited and executed.

## Requirements tor Tool

So I had the following requirements for a CLI tool:

1. Each tutorial should be a single HTML page
2. The source file (.try) based on existing markup standards:
   - Javascript
   - Markdown
   - HTML
3. The additions should be minimal, that is, the markup should be as little new syntax as possible. The real need is to make ir as easy as possible to get started, easy to understand, and not surprise the user in its behavior.
4. Should give predictable results.
5. The system sould be easy for the authors, and simple for the end user.
   - Minimal number of markers for TryitJS features
   - Each TryitJS markup tag should be in a line of its own
     - Allow a tutorial to be built up from smaller nodules
6. Minimal dependency
7. Support all features using Javascript on the users browser
8. Besides the HTML, and standard HTML file types used by by HTML, no other files or services should be required
   - Make is very easy to deploy on any site supporting simple web serving

- Minimal number of markers for TryitJS features
  - Each TryitJS markup tag should be in a line of its own
    - Allow a tutorial to be built up from smaller nodules

Page - 1

# Structure of TryItjs file

## Structure of .try file

Markdown is great for just text documentation, but it has no facility to use Javascript on those pages (security concern)

### A page definition

To generate a HTML file we need a page.try

      !head --- to be a page this must be at the top of the page
          .... HTML HEAD elements go here ...
      !md
          .... Markdown elements go here ...
      !html
          ... some inline HTML markup goes here...

      @@include xxx.try  --- this includes the body of the file 'xxx.tyy' here (a page fragment)
      !tryit
            ... Javascript the user can edit and execute goes here ....

      !end --- end of the file
            ... HTML ot add to the bottom of the page goes here...

Page - 2
Executing previous dependent scripts
Waiting to execute