diff --git a/docs/javascript.md b/docs/javascript.md index d4b15a7e3..9ec234a61 100644 --- a/docs/javascript.md +++ b/docs/javascript.md @@ -28,7 +28,7 @@ A program block looks like this (note the semicolon): const foo = 1 + 2; ``` -A program block doesn’t display anything by default, but you can call [`display`](#display(value)) to display something. +A program block doesn’t display anything by default, but you can call [`display`](#display-value) to display something. JavaScript blocks do not show their code by default. If you want to show the code, use the `echo` directive: @@ -129,7 +129,7 @@ Expressions cannot declare top-level reactive variables. To declare a variable, ## Explicit display -The built-in [`display` function](#display(value)) displays the specified value. +The built-in [`display` function](#display-value) displays the specified value. ```js echo const x = Math.random(); @@ -202,7 +202,7 @@ Inputs.button("Click me", {value: 0, reduce: (i) => displayThere(++i)}) ## Implicit display -JavaScript expression fenced code blocks are implicitly wrapped with a call to [`display`](#display(value)). For example, this arithmetic expression displays implicitly: +JavaScript expression fenced code blocks are implicitly wrapped with a call to [`display`](#display-value). For example, this arithmetic expression displays implicitly: ```js echo 1 + 2 // implicit display @@ -297,7 +297,7 @@ The current width of the main element in pixels as a reactive variable. A fenced width ``` -See [`Generators.width`](./lib/generators#width(element)) for implementation. +See [`Generators.width`](./lib/generators#width-element) for implementation. ## now @@ -307,4 +307,4 @@ The current time in milliseconds since Unix epoch as a reactive variable. A fenc now ``` -See [`Generators.now`](./lib/generators#now()) for implementation. +See [`Generators.now`](./lib/generators#now) for implementation. diff --git a/docs/reactivity.md b/docs/reactivity.md index 388cdea5c..7a3d820ee 100644 --- a/docs/reactivity.md +++ b/docs/reactivity.md @@ -126,7 +126,7 @@ Values that change over time — such as interactive inputs, animation parameter
As with implicit await and promises, implicit iteration of generators only applies across code blocks, not within a code block.
-As an example, here’s an HTML input element. By passing it to [`Generators.input`](<../lib/generators#input(element)>), we can define a generator that yields the input’s value each time it changes. +As an example, here’s an HTML input element. By passing it to [`Generators.input`](<../lib/generators#input-element>), we can define a generator that yields the input’s value each time it changes. @@ -298,7 +298,7 @@ The `view` function does two things: 1. it [displays](../javascript#explicit-display) the given DOM *element*, and then 2. returns a corresponding value generator. -The `view` function uses [`Generators.input`](../lib/generators#input(element)) under the hood. As shown above, you can call `Generators.input` directly, say to declare the input as a top-level variable without immediately displaying it. +The `view` function uses [`Generators.input`](../lib/generators#input-element) under the hood. As shown above, you can call `Generators.input` directly, say to declare the input as a top-level variable without immediately displaying it. ```js echo const subjectInput = html``; diff --git a/docs/style.css b/docs/style.css index c195e8cb7..724bd3a71 100644 --- a/docs/style.css +++ b/docs/style.css @@ -9,9 +9,31 @@ --theme-foreground-focus: #148576; } +h1, +h2, +h3, +h4, +h5, +h6 { + margin-top: revert; +} + +h1 code, +h2 code, +h3 code, +h4 code, +h5 code, +h6 code, code, tt { - font-size: inherit; + font-size: revert; +} + +code:not(pre code, h1 code, h2 code, h3 code, h4 code, h5 code, h6 code) { + color: var(--theme-foreground-alt); + background-color: var(--theme-background-alt); + padding: 2px 4px; + border-radius: 4px; } @media (prefers-color-scheme: dark) {