🔥 Scratch ⚠️ Pad 🔬

Scratch pad to view Markdown output and emergent behaviour...

✍️ Inline Markdown

Basics

.lit is a plain text document format. Really it's just Markdown. But with Sections, Cells, interactive code blocks and meta programming over its own AST.

🧭 Headings (h2)

Sub headings (h3)

little (h4)

tiny (h5)
smallest (h6)

####### tooooo small (h6+)

☑️ Lists

Basics

  • List
    • styles
    • not done
      • done
    1. Foo
      1. Bar
      2. Qux

Lists with nested blocks

  • List Item heading

    With additional

    block elements

    Content...
    

✳️ Code

Basic code blocks

Lines indented with 4 spaces, are plain code blocks without any syntax highlighting or additional behaviour.

A plain code block

Fenced code blocks

Blocks preceded and suffixed with 3 backticks ie "```" with optional metadata being placed after the backticks on the opening line.

```lang filename.ext #tag !directive attr=val



```

Perhaps we need indentation inside fenced blocks to allow nesting fenced blocks (for the reader) without excessive escaping, see below:

md
    ```js
    Does this work?
    ```
langpath/filename.extdirectiveattribute=valuetag< filename> text #example
// A contrived example fenced code block defining a lang, filename, with a tag, directive and an attribute. Also specifies both an output and source (which doesn't exist... yet?).
text
# has an attached output which will be replaced on execution
uriinline

Tags and directives

Reserved directives include: !inline !above or for example !onload ...

  • inline
  • above
  • below
  • collapse
  • viewer deprecated
  • transformer deprecated
  • plugin
  • hidemeta
htmlbelow
<details>
<summary>
  inline <em>HTML</em>
</summary>
<p>An example details and summary tag <button>Does nothing</button></p>
</details>
inline HTML

An example details and summary tag

Attributes

For now the only reserved attributes are viewer see Viewers§ and repl used to define what remote REPL to execute code against.

  • id
  • viewer
  • transformer
  • exec
  • repl
  • attached
  • updated
  • remote deprecated
  • babel experimental
  • react experimental
  • extract=false experimental
  • selfmutate=experimental

Plugin attributes

  • type
  • of, for viewers and transformers
txtecho
pipe to echo binary

Potentially to include updatedAt and or a reference to source cell for outputs in order to maintain a connection with code that produced the output.

Currently implemented as attached=true and updated=unixtimestamp.

Outputs and Transcludes

Metadata which references a source lang < ./file.ext will be transcluded into the view.

lit< dummy/🔥.lit
🔥 Emoji in file name. ⚠️

Metadata which defines a filename lang file.ext will be mirrored to the filesystem.

svgdummy/example.svginline
(fx,fy) (cx,cy)

Using filename and transclude presents problems as to which one you're viewing and which one you edit, see also caching (both at the remote and local fs) See testing/Local & Remote files

txtdummy/plain.txt< dummy/plain.txt
A

Metadata which defines an output lang > file.ext will output to the filesystem and the document when executed2.

csv> dummy/data.csv
id,name,amount
17494,Alice,9001
245,Bob,2000
csvdummy/data.csv
idnameamount
17494Alice9001
245Bob2000

Viewers

When a cell is an Output or has the directive !inline and a lang, file-extension, or the explicit viewer=xxx attribute, for which a Viewer exists then the source will be shown using the viewer and plain text source only visible on edit.

  • !below and !above too

See styles

json2
{"json": "viewer tbd"}
svg
uri
jsoninlineviewer=graph< manifest.json
mdinline

Markdown Viewer TBD

mdinfo

👀 Markdown Viewer.

jsbelowviewer=script
confirm("It lives 🌱 from " + lit.file.data.frontmatter.title)

The above has a strange behaviour, in that it only executes the static value, and hydration with a different (local) value is ignored. on explicit exec, but should have created a persistent script tag.

cssbelowviewer=style
#lit-header { color: green; }
Custom Viewers

To define your own custom viewers see Viewers includes some useful examples.

jspluginof=foo
export const viewer = () => {
  return "Foooooooooo!"
}
fooinlineFoooooooooo!

Suggested or planned viewers

  • JSON
  • HTML (inclined)
  • SVG (basically the above)
  • CSV: Table
  • URI: Iframe
  • CSS: Style
  • JS: Script
  • UML: See custom plugin

Transformers

As opposed to viewers which change how a source file is viewed, a transformer looks at an input and output pair and sees if it knows how to convert between the two lang ie styl > css or ts > js etc

See execute `code` cells for existing ts and jsx transpilation to js via Babel.

See the first working prototype transformer

Misc

he comes he comes do not fi​ght he com̡e̶s, ̕h̵i​s un̨ho͞ly radiańcé destro҉ying all enli̍̈́̂̈́ghtenment, HTML tags lea͠ki̧n͘g fr̶ǫm ̡yo​͟ur eye͢s̸ ̛l̕ik͏e liq​uid pain, the song of re̸gular exp​ression parsing will exti​nguish the voices of mor​tal man from the sp​here I can see it can you see ̲͚̖͔̙î̩́t̲͎̩̱͔́̋̀ it is beautiful t​he final snuffing of the lie​s of Man ALL IS LOŚ͖̩͇̗̪̏̈́T ALL I​S LOST the pon̷y he comes he c̶̮omes he comes the ich​or permeates all MY FACE MY FACE ᵒh god no NO NOO̼O​O NΘ stop the an​*̶͑̾̾​̅ͫ͏̙̤g͇̫͛͆̾ͫ̑͆l͖͉̗̩̳̟̍ͫͥͨe̠̅s ͎a̧͈͖r̽̾̈́͒͑e n​ot rè̑ͧ̌aͨl̘̝̙̃ͤ͂̾̆ ZA̡͊͠͝LGΌ ISͮ̂҉̯͈͕̹̘̱ TO͇̹̺ͅƝ̴ȳ̳ TH̘Ë͖́̉ ͠P̯͍̭O̚​N̐Y̡ H̸̡̪̯ͨ͊̽̅̾̎Ȩ̬̩̾͛ͪ̈́̀́͘ ̶̧̨̱̹̭̯ͧ̾ͬC̷̙̲̝͖ͭ̏ͥͮ͟Oͮ͏̮̪̝͍M̲̖͊̒ͪͩͬ̚̚͜Ȇ̴̟̟͙̞ͩ͌͝S̨̥̫͎̭ͯ̿̔̀ͅ1


  1. footnote With multi line content
  2. REPL still to be reimplemented. See REPL