Add attribute support on fenced code blocks

docs/dot.md

@@ -24,15 +24,15 @@ digraph G {
 
 Here are some more examples.
 
-```dot show
+```dot echo
 graph { n0 -- n1 -- n2 -- n3 -- n0 }
 ```
 
-```dot show
+```dot echo
 digraph { x -> y -> z }
 ```
 
-```dot show
+```dot echo
 digraph G {
   subgraph cluster_0 {
     a0 -> a1 -> a2 -> a3

docs/javascript/display.md

@@ -2,7 +2,7 @@
 
 The reason we write client-side JavaScript is to display stuff! So how does that work?
 
-```js show
+```js echo
 Plot.plot({
   marks: [
     Plot.frame(),
@@ -13,7 +13,7 @@ Plot.plot({
 
 The call to `Plot.plot` above is a JavaScript expression. This expression returns an SVG element. When a JavaScript fenced code block contains an expression (but not a program — more on that in a sec), the resulting value is displayed by implicitly wrapping the expression with a `display` call. The above is thus equivalent to:
 
-```js show
+```js echo
 display(
   Plot.plot({
     marks: [
@@ -24,23 +24,23 @@ display(
 );
 ```
 
-The `display` function automatically displays the specified value wherever the code chunk is on the page. If you use the `show` directive to show the code, as above, the evaluated value is shown _above_ the code (not below).
+The `display` function automatically displays the specified value wherever the code chunk is on the page. If you use the `echo` directive to echo the code, as above, the evaluated value is shown _above_ the code (not below).
 
 When `value` is not a DOM node, display will automatically create a suitable corresponding DOM node to display.
 
-```js show
+```js echo
 1 + 2
 ```
 
 It _won’t_ display if you have a semicolon. So, watch out for Prettier.
 
-```js show
+```js echo
 1 + 2;
 ```
 
 It also won’t display if you reference the `display` function explicitly (_i.e._, we wouldn’t want to show `2` twice below).
 
-```js show
+```js echo
 display(1), display(2)
 ```
 
@@ -64,7 +64,7 @@ When the passed value is not a DOM node, the behavior of `display` displays on w
 
 In fenced code blocks, display will use the [Observable Inspector](https://github.com/observablehq/inspector).
 
-```js show
+```js echo
 [1, 2, 3]
 ```
 
@@ -78,26 +78,26 @@ ${display([1, 2, 3])}
 
 You can call `display` multiple times within the same code block or inline expression to display multiple values.
 
-```js show
+```js echo
 display(1);
 display(2);
 ```
 
 The `display` function returns the passed-in value, which can be useful for debugging.
 
-```js show
+```js echo
 const x = display(Math.random());
 ```
 
 The `display` function is scoped to each code chunk. But you can capture a code chunk’s `display` function by assigning it to a [top-level variable](./reactivity):
 
-```js show
+```js echo
 const displayThere = display;
 ```
 
 Then you can reference it from other cells:
 
-```js show
+```js echo
 Inputs.button("Click me", {value: 0, reduce: (i) => displayThere(++i)})
 ```
 

docs/javascript/files.md

@@ -2,7 +2,7 @@
 
 You can load files using the built-in `FileAttachment` function.
 
-```js show
+```js echo
 const gistemp = FileAttachment("gistemp.csv").csv({typed: true});
 ```
 

docs/javascript/generators.md

@@ -4,7 +4,7 @@ Values that change over time, such as interactive inputs and animation parameter
 
 For example, here is a generator that increments once a second:
 
-```js show
+```js echo
 const j = (async function* () {
   for (let j = 0; true; ++j) {
     yield j;
@@ -17,7 +17,7 @@ The value of j is: ${j}.
 
 If the generator is synchronous, the generator will yield every animation frame, which is typically 60 frames per second:
 
-```js show
+```js echo
 const i = (function* () {
   for (let i = 0; true; ++i) {
     yield i;
@@ -29,7 +29,7 @@ The value of i is: ${i}.
 
 As another example, you can use the built-in `Generators.observe` to represent the current pointer coordinates:
 
-```js show
+```js echo
 const pointer = Generators.observe((notify) => {
   const pointermoved = (event) => notify([event.clientX, event.clientY]);
   addEventListener("pointermove", pointermoved);
@@ -42,7 +42,7 @@ Pointer is: ${pointer.map(Math.round).join(", ")}.
 
 A WebSocket that lists for Blockchain transactions:
 
-```js show
+```js echo
 const socket = new WebSocket("wss://ws.blockchain.info/inv");
 invalidation.then(() => socket.close());
 socket.addEventListener("open", () => socket.send(JSON.stringify({op: "unconfirmed_sub"})));
@@ -78,7 +78,7 @@ Inputs.table(
 
 An HTML input element and `Generators.input`:
 
-```js show
+```js echo
 const nameInput = display(document.createElement("input"));
 const name = Generators.input(nameInput);
 ```

docs/javascript/imports.md

@@ -2,25 +2,25 @@
 
 You can import a library from npm like so:
 
-```js show
+```js echo
 import confetti from "npm:canvas-confetti";
 ```
 
 Now you can reference the imported `confetti` anywhere on the page.
 
-```js show
+```js echo
 Inputs.button("Throw confetti!", {reduce: () => confetti()})
 ```
 
 You can also import JavaScript from local ES modules. For example, if this is `foo.js`:
 
-```js no-run
+```js run=false
 export const foo = 42;
 ```
 
 Then you can say
 
-```js show
+```js echo
 import {foo} from "./foo.js"
 ```
 

docs/javascript/inputs.md

@@ -2,7 +2,7 @@
 
 You can use the built-in [`view` function](#view(input)) and an HTML input element to create a reactive input. For example, here is a slider:
 
-```js show
+```js echo
 const gain = view(Inputs.range([0, 11], {value: 5, step: 0.1, label: "Gain"}));
 ```
 
@@ -45,7 +45,7 @@ These fancy inputs are designed to work with tabular data such as CSV or TSV [fi
 
 Do something when a button is clicked. [Examples ›](https://observablehq.com/@observablehq/input-button) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#button)
 
-```js show
+```js echo
 const clicks = view(Inputs.button("Click me"));
 ```
 
@@ -59,7 +59,7 @@ clicks
 
 Toggle between two values (on or off). [Examples ›](https://observablehq.com/@observablehq/input-toggle) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#toggle)
 
-```js show
+```js echo
 const mute = view(Inputs.toggle({label: "Mute"}));
 ```
 
@@ -73,7 +73,7 @@ mute
 
 Choose any from a set. [Examples ›](https://observablehq.com/@observablehq/input-checkbox) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#checkbox)
 
-```js show
+```js echo
 const flavors = view(Inputs.checkbox(["salty", "sweet", "bitter", "sour", "umami"], {label: "Flavors"}));
 ```
 
@@ -87,7 +87,7 @@ flavors
 
 Choose one from a set. [Examples ›](https://observablehq.com/@observablehq/input-radio) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#radio)
 
-```js show
+```js echo
 const flavor = view(Inputs.radio(["salty", "sweet", "bitter", "sour", "umami"], {label: "Flavor"}));
 ```
 
@@ -101,7 +101,7 @@ flavor
 
 Pick a number. [Examples ›](https://observablehq.com/@observablehq/input-range) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#range)
 
-```js show
+```js echo
 const n = view(Inputs.range([0, 255], {step: 1, label: "Favorite number"}));
 ```
 
@@ -120,15 +120,15 @@ const capitals = FileAttachment("us-state-capitals.tsv").tsv({typed: true});
 const stateNames = capitals.then((capitals) => capitals.map(d => d.State));
 ```
 
-```js show
+```js echo
 const homeState = view(Inputs.select([null].concat(stateNames), {label: "Home state"}));
 ```
 
 ```js
 homeState
 ```
 
-```js show
+```js echo
 const visitedStates = view(Inputs.select(stateNames, {label: "Visited states", multiple: true}));
 ```
 
@@ -142,7 +142,7 @@ visitedStates
 
 Enter freeform single-line text. [Examples ›](https://observablehq.com/@observablehq/input-text) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#text)
 
-```js show
+```js echo
 const name = view(Inputs.text({label: "Name", placeholder: "What’s your name?"}));
 ```
 
@@ -156,7 +156,7 @@ name
 
 Enter freeform multi-line text. [Examples ›](https://observablehq.com/@observablehq/input-textarea) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#textarea)
 
-```js show
+```js echo
 const bio = view(Inputs.textarea({label: "Biography", placeholder: "What’s your story?"}));
 ```
 
@@ -170,7 +170,7 @@ bio
 
 Choose a date, or a date and time. [Examples ›](https://observablehq.com/@observablehq/input-date) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#date)
 
-```js show
+```js echo
 const birthday = view(Inputs.date({label: "Birthday"}));
 ```
 
@@ -184,7 +184,7 @@ birthday
 
 Choose a color. [Examples ›](https://observablehq.com/@observablehq/input-color) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#color)
 
-```js show
+```js echo
 const color = view(Inputs.color({label: "Favorite color", value: "#4682b4"}));
 ```
 
@@ -198,7 +198,7 @@ color
 
 Choose a local file. [Examples ›](https://observablehq.com/@observablehq/input-file) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#file)
 
-```js show
+```js echo
 const file = view(Inputs.file({label: "CSV file", accept: ".csv", required: true}));
 ```
 
@@ -212,7 +212,7 @@ data = file.csv({typed: true})
 
 Query a tabular dataset. [Examples ›](https://observablehq.com/@observablehq/input-search) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#search)
 
-```js show
+```js echo
 const search = view(Inputs.search(capitals, {placeholder: "Search U.S. capitals"}));
 ```
 
@@ -226,7 +226,7 @@ search // see table below!
 
 Browse a tabular dataset. [Examples ›](https://observablehq.com/@observablehq/input-table) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#table)
 
-```js show
+```js echo
 const rows = view(Inputs.table(search));
 ```
 

docs/javascript/mutables.md

@@ -2,15 +2,15 @@
 
 Normally, only the code block that declares a top-level variable can define it or assign to it. (This constraint may helpfully encourage you to decouple code.) You can however use the `Mutable` function to declare a mutable generator, allowing other code to mutate the generator’s value. This approach is akin to React’s `useState` hook. For example:
 
-```js show
+```js echo
 const count = Mutable(0);
 const increment = () => ++count.value;
 const reset = () => count.value = 0;
 ```
 
 In other code, you can now create buttons to increment and reset the count like so:
 
-```js show
+```js echo
 Inputs.button([["Increment", increment], ["Reset", reset]])
 ```
 

docs/javascript/promises.md

@@ -2,7 +2,7 @@
 
 When code refers to a promise defined in another code block, the referencing code implicitly awaits the promise. Most often, promises are used to load files, fetch data from a remote server, or query a database. As a contrived example, within the block below, `hello` is a promise that resolves via `setTimeout`; if you reference `hello` from another code block or expression, the other code won’t run until the timeout fires and will see `hello` as a string.
 
-```js show
+```js echo
 const hello = new Promise((resolve) => {
   setTimeout(() => {
     resolve("hello");

docs/javascript/reactivity.md

@@ -4,7 +4,7 @@ TK Something about how this is nice for incremental updates during preview, but
 
 You may be accustomed to code running sequentially from top to bottom, and manually evaluating code in a notebook; Observable is different: we use [dataflow](https://en.wikipedia.org/wiki/Dataflow_programming), as in a spreadsheet, to *automatically* run code in topological order as determined by [top-level variable](#top-level-variables) references. For example, here we reference variables `x` and `y` even though they are defined in a code block below:
 
-```js show
+```js echo
 x + y
 ```
 
@@ -14,15 +14,15 @@ When code (such as `x + y`) references variables (such as `x` and `y`) defined b
 
 A top-level variable declared in a JavaScript fenced code block can be referenced in another code block or inline expression on the same page. So if you say:
 
-```js show
+```js echo
 const x = 1, y = 2;
 ```
 
 Then you can reference `x` and `y` elsewhere on the page (with values ${x} and ${y}, respectively). Top-level variable declarations are effectively [hoisted](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting); you can reference variables even if the defining code block appears later on the page, and code runs in topological rather than top-down document order. If multiple blocks define top-level variables with the same name, references to these variables will throw a duplicate definition error.
 
 To prevent variables from being visible outside the current block, make them local with a block statement:
 
-```js show
+```js echo
 {
   const z = 3;
 }