---
readOnly: true
---
# Documentation

## Markdown Cells

lorem ipsum sit dolor emet..

### Headlines

In markdown, lines starting with one or more `#` signify a headline, In `.lit` this also starts a section.

    # Title
    ## Sub section
    - a list
    - of things
    ***

Results in:

# Title
## Sub section
- a list
- of things

***

## Code Cells

    ```
    A fresh code cell.
    ```

Results in:
```
A fresh code cell.
```

### Metadata

  The first part after the code fence: `````ext`` where `ext` is a language extention ie: `txt`/`js`/`md` like so:

    ```js
    console.log('Hi')
    ```

Results in:
```js
console.log('Hi')
```

Metadata in `.lit` can also be extened to include a `name`, `tags` and attribute `key`/`value` pairs.

    ```lang#name.tag1.tag2[attr="val"]

Resulting in the following:

```lang#name.tag1.tag2[attr="val"]

```

#### Reserved `tags` and `attr`

Some tags, like:

- `.inline` - Show output inline (input is only visible on *edit*) raw markdown sections behave this way by default. Code cells are `.below` by default, but you can override as appropriate, ie `.above`.

and attributes like:

- `[mode=""]` - To specify a syntax highlight mode, if it needs to be different to the `lang` default.
- `[repl="node -e"]` Define a custom **REPL** to execute the code.

## Code output

You may have noticed above that you can **execute** code cells, and all `console.log()`s are shown below.

Like so:

```js
console.log("one")
console.warn("a warning")
console.error("oh no!")
```

### `return` values

In `js` that is not being executed in a `repl` [^repls] you can also provide an explicit return value:

```js
return Object.keys(this)
```
```>txt[mode="javascript"]
[ 'id',
  'type',
  'metadata',
  'previous',
  'next',
  'parent',
  'children',
  'content',
  'output',
  'index',
  'comp' ]
```

#### Promises

If your code performs some asyncronous task, returning a `Promise()` will wait for it to complete, like so:
```js
let n = 0;
return new Promise((resolve, reject)=>{
  function foo() {
    console.log(n++)
    if (n < 10) setTimeout(foo, 1000)
    else resolve()
  }
  foo()
})
```

### `transformers` and `viewers`

    ```js>md
    return "**Javascript** *producing* __Markdown__ output."
    ```

```js>md
return "**Javascript** *producing* __Markdown__ output."
```
```>md[mode="javascript"]
**Javascript** *producing* __Markdown__ output.
```

```
A fresh code cell...
```

## Uml
```uml>svg
  [<frame>Decorator pattern|
  [<abstract>Component||  operation()]
  [Client] depends --> [Component]
  [Decorator|- next: Component]
  [Decorator] decorates -- [ConcreteComponent]
  [Component] <:- [Decorator]
  [Component] <:- [ConcreteComponent]
  ]
```

```uml>svg
  [<frame>Strategy pattern|
  [client] o- [<abstract>Strategy|  operation()]
  [Strategy] <:-- [StrategyA]
  [Strategy] <:-- [StrategyB]
  ]
```

```
  [<package>UML Representation|
  [Compartment|lines: string*;nodes: Classifier*;relations: Relations*]
  [Classifier|type: string;name: string;compartments: Compartment*;width: int;height: int;x: int;y: int]
  [Relation|startLabel: string;endLabel: string;type: string;startShape: string;endShape: string;path: Point*]
  [Compartment] ->[Classifier]
  [Classifier] ->[Compartment]
  [Compartment] ->[Relation]
  ]
  [parser]-->[UML Representation]
  [layouter||layout(ast: Compartment)]
  [renderer||render(d: Compartment)]
  [parser||parse(source: String): Classifier] ->[Jison]
  [layouter]-->[UML Representation]
  [layouter] ->[dagre]
  [renderer]-->[UML Representation]
  [renderer]o->[<instance>:Canvas]
  [measurer]<:--[renderer]
  [layouter]->[measurer]
```
### Usage
Car has an Engine

```uml>svg
[Car]->[Engine]
```

Car owns an arbitrary number of blemished

```uml>svg
[Car] +-> 0..* [RustPatches]
```

Car knows its Manufacturer

```uml>svg
[Car]o->[Manufacturer]
```

Car depends on Fuel

```uml>svg
[Car]-->[Fuel]
```

Pickup inherits from Car

```uml>svg
[Pickup]-:>[Car]
```

Car implements interface IVehicle

```uml>svg
[Car]--:>[IVehicle]
```

Paul and Ron have a named association

```uml>svg
[Paul] friend - [Ron]
```

They both depend on each other

```uml>svg
[Chicken]<->[Egg]
```

Car has some attributes

```uml>svg
[Car|maxSpeed: Float;color: Color]
```

Car has several valves

```uml>svg
[Car| valves: Valve\[\] ]
```

Engine has an operation

```uml>svg
[Engine||start()]
```

Engine has internal parts

```uml>svg
[Engine|
[Cylinder]->1[Piston]
[Cylinder]->2[Valve]
]
```

Engine is an abstract class

```uml>svg
[<abstract>Engine||start()]
```

Car is in the package 'vehicles'

```uml>svg
[<package>vehicles|[Car]]
```

Car has an attached note

```uml>svg
[Car]--[<note>only driven
twice a month
]
```

Set font

```uml>svg
#font: Times
Some text
```

Layout the diagram really tight

```uml>svg
#fontSize: 8
#spacing: 12
#padding: 3
[tiny box]
```

Create your own styles

```uml>svg
#.box: fill=#8f8 dashed
[<box> GreenBox]
```