LiveExample
module LiveExample| Assembly | Nacara.Plugin.LiveExample |
| Attributes | [<RequireQualifiedAccess>] |
F# snippets a reader can run and edit, compiled in their browser.
A live block is an ordinary code block until someone presses Run, so a reader who never does - or who has JavaScript off - loses nothing. Run fetches the compiler once for the page and the result runs in a frame of its own.
Mark a block with live, and name a preset when it needs one:
```fsharp live
printfn "hello"
open Elmish
## Functions and values
<div class="nacara-api__entry" id="create">
<a class="nacara-api__anchor"
href="#create"
aria-label="Link to create"
data-pagefind-ignore></a>
<details class="nacara-api__member">
<summary>
<pre class="nacara-api__signature nacara-api__signature--hanging"><code><span class="tok-function">create</span> <span class="tok-punctuation">()</span> <span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-core/nacara-core/iplugin/">IPlugin</a></code></pre>
</summary>
<div class="nacara-api__body">
The plugin, with its options as they are.
</div>
</details>
</div>
<div class="nacara-api__entry" id="createwith">
<a class="nacara-api__anchor"
href="#createwith"
aria-label="Link to createWith"
data-pagefind-ignore></a>
<details class="nacara-api__member">
<summary>
<pre class="nacara-api__signature nacara-api__signature--hanging"><code><span class="tok-function">createWith</span> <span class="tok-punctuation">(</span><span class="tok-parameter">configure</span><span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/liveexampleoptions/">LiveExampleOptions</a> <span class="tok-operator">-></span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/liveexampleoptions/">LiveExampleOptions</a><span class="tok-punctuation">)</span> <span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-core/nacara-core/iplugin/">IPlugin</a></code></pre>
</summary>
<div class="nacara-api__body">
The plugin, with its options changed.
| Parameter | |
|---|---|
| `configure` | What to change about them. |
</div>
</details>
</div>
<div class="nacara-api__entry" id="defaultcss">
<a class="nacara-api__anchor"
href="#defaultcss"
aria-label="Link to defaultCss"
data-pagefind-ignore></a>
<details class="nacara-api__member">
<summary>
<pre class="nacara-api__signature nacara-api__signature--hanging"><code><span class="tok-function">defaultCss</span> <span class="tok-punctuation">(</span><span class="tok-parameter">value</span><span class="tok-punctuation">:</span> <span class="tok-type">string</span><span class="tok-punctuation">)</span> <span class="tok-punctuation">(</span><span class="tok-parameter">options</span><span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/liveexampleoptions/">LiveExampleOptions</a><span class="tok-punctuation">)</span> <span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/liveexampleoptions/">LiveExampleOptions</a></code></pre>
</summary>
<div class="nacara-api__body">
The stylesheet used by a preset that names none of its own.
| Parameter | |
|---|---|
| `value` | The CSS file, relative to the project root. |
| `options` | The options so far. |
</div>
</details>
</div>
<div class="nacara-api__entry" id="defaulttemplate">
<a class="nacara-api__anchor"
href="#defaulttemplate"
aria-label="Link to defaultTemplate"
data-pagefind-ignore></a>
<details class="nacara-api__member">
<summary>
<pre class="nacara-api__signature nacara-api__signature--hanging"><code><span class="tok-function">defaultTemplate</span> <span class="tok-punctuation">(</span><span class="tok-parameter">value</span><span class="tok-punctuation">:</span> <span class="tok-type">string</span><span class="tok-punctuation">)</span> <span class="tok-punctuation">(</span><span class="tok-parameter">options</span><span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/liveexampleoptions/">LiveExampleOptions</a><span class="tok-punctuation">)</span> <span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/liveexampleoptions/">LiveExampleOptions</a></code></pre>
</summary>
<div class="nacara-api__body">
The page used by a preset that names none of its own.
| Parameter | |
|---|---|
| `value` | The HTML file, relative to the project root. |
| `options` | The options so far. |
</div>
</details>
</div>
<div class="nacara-api__entry" id="defaults">
<a class="nacara-api__anchor"
href="#defaults"
aria-label="Link to defaults"
data-pagefind-ignore></a>
<details class="nacara-api__member">
<summary>
<pre class="nacara-api__signature nacara-api__signature--hanging"><code><span class="tok-function">defaults</span><span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/liveexampleoptions/">LiveExampleOptions</a></code></pre>
</summary>
<div class="nacara-api__body">
The options a site starts from.
</div>
</details>
</div>
<div class="nacara-api__entry" id="fable">
<a class="nacara-api__anchor"
href="#fable"
aria-label="Link to fable"
data-pagefind-ignore></a>
<details class="nacara-api__member">
<summary>
<pre class="nacara-api__signature nacara-api__signature--hanging"><code><span class="tok-function">fable</span> <span class="tok-punctuation">(</span><span class="tok-parameter">value</span><span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/fablerelease/">FableRelease</a><span class="tok-punctuation">)</span> <span class="tok-punctuation">(</span><span class="tok-parameter">options</span><span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/liveexampleoptions/">LiveExampleOptions</a><span class="tok-punctuation">)</span> <span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/liveexampleoptions/">LiveExampleOptions</a></code></pre>
</summary>
<div class="nacara-api__body">
Set which build of the Fable compiler snippets are compiled by.
Pinned by default, to the pair this plugin was built against. `Latest` follows
Fable without waiting for a release of this plugin, so two builds of the same commit can
differ; the log says which Fable it found.
| Parameter | |
|---|---|
| `value` | The value to use. |
| `options` | The options so far. |
</div>
</details>
</div>
<div class="nacara-api__entry" id="fabletool">
<a class="nacara-api__anchor"
href="#fabletool"
aria-label="Link to fableTool"
data-pagefind-ignore></a>
<details class="nacara-api__member">
<summary>
<pre class="nacara-api__signature nacara-api__signature--hanging"><code><span class="tok-function">fableTool</span> <span class="tok-punctuation">(</span><span class="tok-parameter">value</span><span class="tok-punctuation">:</span> <span class="tok-type">string</span><span class="tok-punctuation">)</span> <span class="tok-punctuation">(</span><span class="tok-parameter">options</span><span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/liveexampleoptions/">LiveExampleOptions</a><span class="tok-punctuation">)</span> <span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/liveexampleoptions/">LiveExampleOptions</a></code></pre>
</summary>
<div class="nacara-api__body">
Precompile with a Fable of your own instead of the one that matches.
Left alone, the build fetches the Fable the browser's compiler was built from and
precompiles with that, so the two agree whatever is installed on the machine.
Set it when working on Fable itself: point it at a local build and the snippets are
precompiled with that one. Keeping the two in step is then yours, and the build says when
they have drifted.
| Parameter | |
|---|---|
| `value` | The `fable` executable to run. |
| `options` | The options so far. |
</div>
</details>
</div>
<div class="nacara-api__entry" id="highlighting">
<a class="nacara-api__anchor"
href="#highlighting"
aria-label="Link to highlighting"
data-pagefind-ignore></a>
<details class="nacara-api__member">
<summary>
<pre class="nacara-api__signature nacara-api__signature--hanging"><code><span class="tok-function">highlighting</span> <span class="tok-punctuation">(</span><span class="tok-parameter">value</span><span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/liveexamplehighlighting/">LiveExampleHighlighting</a><span class="tok-punctuation">)</span> <span class="tok-punctuation">(</span><span class="tok-parameter">options</span><span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/liveexampleoptions/">LiveExampleOptions</a><span class="tok-punctuation">)</span> <span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/liveexampleoptions/">LiveExampleOptions</a></code></pre>
</summary>
<div class="nacara-api__body">
Set how an edited snippet colours itself.
| Parameter | |
|---|---|
| `value` | The value to use. |
| `options` | The options so far. |
</div>
</details>
</div>
<div class="nacara-api__entry" id="outputgrammar">
<a class="nacara-api__anchor"
href="#outputgrammar"
aria-label="Link to outputGrammar"
data-pagefind-ignore></a>
<details class="nacara-api__member">
<summary>
<pre class="nacara-api__signature nacara-api__signature--hanging"><code><span class="tok-function">outputGrammar</span> <span class="tok-punctuation">(</span><span class="tok-parameter">value</span><span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-highlight-treesitter/nacara-plugins/treesittergrammar/">TreeSitterGrammar</a><span class="tok-punctuation">)</span> <span class="tok-punctuation">(</span><span class="tok-parameter">options</span><span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/liveexampleoptions/">LiveExampleOptions</a><span class="tok-punctuation">)</span> <span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/liveexampleoptions/">LiveExampleOptions</a></code></pre>
</summary>
<div class="nacara-api__body">
Add a grammar for colouring the output of a target.
Every language Fable targets is coloured already, so name a grammar here only to
override one, or to colour a language Fable does not target. Declared the same way the
highlighting plugin declares one, so a site that already colours Gleam blocks can hand over
the grammar it has.
| Parameter | |
|---|---|
| `value` | The grammar, named after the language it colours. |
| `options` | The options so far. |
</div>
</details>
</div>
<div class="nacara-api__entry" id="preset">
<a class="nacara-api__anchor"
href="#preset"
aria-label="Link to preset"
data-pagefind-ignore></a>
<details class="nacara-api__member">
<summary>
<pre class="nacara-api__signature nacara-api__signature--hanging"><code><span class="tok-function">preset</span> <span class="tok-punctuation">(</span><span class="tok-parameter">value</span><span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/liveexamplepreset/">LiveExamplePreset</a><span class="tok-punctuation">)</span> <span class="tok-punctuation">(</span><span class="tok-parameter">options</span><span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/liveexampleoptions/">LiveExampleOptions</a><span class="tok-punctuation">)</span> <span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/liveexampleoptions/">LiveExampleOptions</a></code></pre>
</summary>
<div class="nacara-api__body">
Add a preset a fence can name.
Built with [`LiveExamplePreset`](/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/liveexamplepreset/) and handed over
whole.
| Parameter | |
|---|---|
| `value` | The preset, as `create` and its setters made it. |
| `options` | The options so far. |
</div>
</details>
</div>
<div class="nacara-api__entry" id="register">
<a class="nacara-api__anchor"
href="#register"
aria-label="Link to register"
data-pagefind-ignore></a>
<details class="nacara-api__member">
<summary>
<pre class="nacara-api__signature nacara-api__signature--hanging"><code><span class="tok-function">register</span> <span class="tok-punctuation">(</span><span class="tok-parameter">site</span><span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-core/nacara-core/site/">Site</a><span class="tok-punctuation">)</span> <span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-core/nacara-core/site/">Site</a></code></pre>
</summary>
<div class="nacara-api__body">
Let a site run its F# snippets in the browser.
| Parameter | |
|---|---|
| `site` | The site being described. |
</div>
</details>
</div>
<div class="nacara-api__entry" id="registerwith">
<a class="nacara-api__anchor"
href="#registerwith"
aria-label="Link to registerWith"
data-pagefind-ignore></a>
<details class="nacara-api__member">
<summary>
<pre class="nacara-api__signature nacara-api__signature--hanging"><code><span class="tok-function">registerWith</span> <span class="tok-punctuation">(</span><span class="tok-parameter">configure</span><span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/liveexampleoptions/">LiveExampleOptions</a> <span class="tok-operator">-></span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/liveexampleoptions/">LiveExampleOptions</a><span class="tok-punctuation">)</span> <span class="tok-punctuation">(</span><span class="tok-parameter">site</span><span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-core/nacara-core/site/">Site</a><span class="tok-punctuation">)</span> <span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-core/nacara-core/site/">Site</a></code></pre>
</summary>
<div class="nacara-api__body">
Let a site run its F# snippets in the browser, configured.
| Parameter | |
|---|---|
| `configure` | Given the defaults, the options to use. Anything it leaves alone keeps its default. |
| `site` | The site being described. |
</div>
</details>
</div>
<div class="nacara-api__entry" id="stats">
<a class="nacara-api__anchor"
href="#stats"
aria-label="Link to stats"
data-pagefind-ignore></a>
<details class="nacara-api__member">
<summary>
<pre class="nacara-api__signature nacara-api__signature--hanging"><code><span class="tok-function">stats</span> <span class="tok-punctuation">(</span><span class="tok-parameter">value</span><span class="tok-punctuation">:</span> <span class="tok-type">bool</span><span class="tok-punctuation">)</span> <span class="tok-punctuation">(</span><span class="tok-parameter">options</span><span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/liveexampleoptions/">LiveExampleOptions</a><span class="tok-punctuation">)</span> <span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/liveexampleoptions/">LiveExampleOptions</a></code></pre>
</summary>
<div class="nacara-api__body">
Show what each compile cost, in a tab of its own.
Off by default: it is for whoever is tuning the site, not for whoever is reading
it. Rows accumulate rather than replacing each other, so an edit can be compared with the
run before it.
| Parameter | |
|---|---|
| `value` | Whether to show it. |
| `options` | The options so far. |
</div>
</details>
</div>
<div class="nacara-api__entry" id="tab">
<a class="nacara-api__anchor"
href="#tab"
aria-label="Link to tab"
data-pagefind-ignore></a>
<details class="nacara-api__member">
<summary>
<pre class="nacara-api__signature nacara-api__signature--hanging"><code><span class="tok-function">tab</span> <span class="tok-punctuation">(</span><span class="tok-parameter">value</span><span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/liveexampletab/">LiveExampleTab</a><span class="tok-punctuation">)</span> <span class="tok-punctuation">(</span><span class="tok-parameter">options</span><span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/liveexampleoptions/">LiveExampleOptions</a><span class="tok-punctuation">)</span> <span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/liveexampleoptions/">LiveExampleOptions</a></code></pre>
</summary>
<div class="nacara-api__body">
Set which tab a snippet opens on once it has run.
Left alone it opens on the console, or on the result when the snippet drew
something and printed nothing.
| Parameter | |
|---|---|
| `value` | The value to use. |
| `options` | The options so far. |
</div>
</details>
</div>
<div class="nacara-api__entry" id="target">
<a class="nacara-api__anchor"
href="#target"
aria-label="Link to target"
data-pagefind-ignore></a>
<details class="nacara-api__member">
<summary>
<pre class="nacara-api__signature nacara-api__signature--hanging"><code><span class="tok-function">target</span> <span class="tok-punctuation">(</span><span class="tok-parameter">value</span><span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/liveexampletarget/">LiveExampleTarget</a><span class="tok-punctuation">)</span> <span class="tok-punctuation">(</span><span class="tok-parameter">options</span><span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/liveexampleoptions/">LiveExampleOptions</a><span class="tok-punctuation">)</span> <span class="tok-punctuation">:</span> <a class="tok-type" href="/Nacara/reference/nacara-plugin-liveexample/nacara-plugins/liveexampleoptions/">LiveExampleOptions</a></code></pre>
</summary>
<div class="nacara-api__body">
Set what a snippet is compiled to when its fence does not say.
Only `JavaScript` runs in a browser. Any other target compiles and shows its
code.
| Parameter | |
|---|---|
| `value` | The value to use. |
| `options` | The options so far. |
</div>
</details>
</div>