# Welcome

This is a lit `.lit` notebook. It is made up of *Sections* and *Cells*. But at its __core__ it's
just a **Markdown** document.

When editing a cell, press <kbd>Shift</kbd>+<kbd>Enter</kbd>[^yup] to execute it. To cancel editing press <kbd>Esc</kbd>, or if you'd like to save it but not execute it press <kbd>Ctrl</kbd>+<kbd>S</kdb>.

[^yup]: Yes, even on mobile

```js .inline.autoexec>md
console.log('**Your recent `.lit` files:**')
return lit.notebook.storage.getRecent().slice(0,5).map(file => {
	let href = encodeURI(`?${file}`)
	return `1. [${file.split('/').slice(-1)[0]}](${href})`
}).join('\n')
```

## Overview

Write **markdown** with `## headlines` and __text__ styling as normal...

```md.inline>md.center

![logo](icon.png =30%x*)

    Markdown by default.

<!---
    ok so this ones cheating ;) but only a little...
-->
```

```html #main.example.below>html
<div class="widget">
    <a name="anchor">My Custom anchor</a>
    <details>
        <summary>My <b>custom</b> html widget</summary>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </details>
</div>
```

```css #styles.below>style
.widget {
    font-style: italic;
    color: red;
    padding: 1em;
}

.widget details {
    margin-top: 0.5em;
}

.center {
  text-align: center;   
}
```

```js .browser
console.log("Hi from javscript");
```
```>txt[mode="text"]
Execute this *Cell* to see its output.
```

```js.nodejs[repl="node"]
console.log(process.env)
```

```uml>svg.center
[A Box]-->[Your Imagination]
```

foo

## Getting Started

- [Getting Started](?/docs/About.lit.md#getting-started)
- etc...

### To Do

lorem isum sit dolor emet

- [x] Link to [HTML Cell](#main)
- [ ] Link to [CSS Cell](#styles)
- [ ] Link to [anchor in output](#anchor)
- [ ] Link section [Getting Started](#getting-started)