• Home
  • File
  • Cell
  • Section
  • Help

    • 🔥 Scratch ⚠️ Pad 🔬

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

    Table of Contents§

    ✍️ 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.

    🔗 Links

    Standard and Anchored/Section§, wiki-links, inline references↗ and [undefined refs], footnotes1§ and external↗ links.

    🧭 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.

    jsbelowexec=onload
    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↩§