28:null 29:["$","title",null,{"children":"Code slide test | Observable Ambassadors | Observable"}] 2e:T47b,display("👉 Functions for the output visualization"); // A tiny D3 chart used to demonstrate slide.codeViz. function demoCircleChart() { const width = 400; const height = 260; const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("width", "100%") .style("height", "100%") // .style("width", width) // .style("height", height) .style("background", "#f4f4f4") .style("border-radius", "10px"); svg .append("circle") .attr("class", "demo-circle") .attr("cx", 60) .attr("cy", height / 2) .attr("r", 34) .attr("fill", "#2a76dd"); return svg.node(); } const demoCircleCode = `svg.select(".demo-circle") .transition() .duration(800) .attr("cx", 340) .attr("fill", "orange");`; function playDemoCircle({visualization}) { d3.select(visualization) .select(".demo-circle") .transition() .duration(800) .attr("cx", 340) .attr("fill", "orange"); } function resetDemoCircle({visualization}) { d3.select(visualization) .select(".demo-circle") .transition() .duration(800) .attr("cx", 60) .attr("fill", "#2a76dd"); }2f:T77b,## Customizing the code panel's colors The `slide.codeViz` code panel uses a light, GitHub-inspired syntax theme (instead of the monokai theme reveal.js ships with, which was designed for a dark background) so it sits comfortably on the panel's light `#f4f4f4` box. Every color is a CSS custom property, defined with a default in the `coreSlideStyle()` cell, so you can override just the ones you want without touching the rest of the theme. | Variable | Controls | Default | |---|---|---| | `--slide-code-bg` | the code box's background | `#f4f4f4` | | `--slide-code-fg` | base text / punctuation | `#24292e` | | `--slide-code-comment` | comments | `#6a737d` (italic) | | `--slide-code-keyword` | keywords (`const`, `function`, `=>`, ...) | `#d73a49` | | `--slide-code-string` | string literals | `#032f62` | | `--slide-code-number` | numeric / other literals | `#005cc5` | | `--slide-code-title` | function / method / class names being defined or called | `#6f42c1` | | `--slide-code-type` | types, tags, attribute names | `#22863a` | | `--slide-code-variable` | variables, built-ins, parameters | `#e36209` | | `--slide-code-meta` | meta tokens (e.g. decorators) | `#999999` | There are two ways to change them: **1. Per-slide, via `slide.codeViz`'s `colors` option** — pass any subset of the variable names above (without the `--slide-code-` prefix) and they're applied as inline custom properties on that slide only: ```js slide.codeViz({ code: mySnippet, visualization: myChart, colors: {bg: "#0d1117", fg: "#c9d1d9", keyword: "#ff7b72", string: "#a5d6ff"} }) ``` **2. Deck-wide, by editing the defaults** — open the `coreSlideStyle()` cell and change the fallback value in the corresponding `var(--slide-code-*, ...)` declaration, e.g. `var(--slide-code-keyword, #d73a49)`. This changes the theme for every `slide.codeViz` slide in the deck that doesn't already override that variable itself.30:T652,## Setting the code panel's language `slide.codeViz` highlights code using reveal.js's built-in highlight.js plugin. Pass the `language` option to tell it what grammar to use — this defaults to `"javascript"`, which is why the demo slide above highlights correctly without setting it explicitly: ```js slide.codeViz({ code: pythonSnippet, language: "python", // any highlight.js language name or alias visualization: myChart }) ``` Under the hood this just sets the `

` element's class to
`language-python` (i.e. `` `language-\${language}` ``), which is the standard
way highlight.js (and reveal.js's plugin) auto-detect which grammar to
apply — no extra language files need to be imported, since the bundled
highlight.js build already includes a large set of common languages
(JavaScript, TypeScript, Python, SQL, CSS, HTML/XML, JSON, Bash/Shell,
C/C++, Java, Go, Rust, R, YAML, Markdown, and more — see highlight.js's
[list of supported languages](https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md)
for the full set and their aliases, e.g. `"py"` for Python or `"sh"` for
Bash).

If you omit `language` (or explicitly pass `language: null`), no
`language-*` class is added and highlight.js falls back to guessing the
language automatically, which is usually less accurate — so it's best to
always set it explicitly when you know what the snippet contains.

Highlighting maps tokens (keywords, strings, numbers, comments, ...) to the
same set of CSS custom properties for every language, so switching languages
doesn't require touching the color theme described above.31:T6ff,## Resizing the code/output split

The boundary between the code and output panels is a draggable divider, so
viewers (or you, while authoring) can adjust the split live:

- **Drag** it left or right to resize the code column; the output column
  takes up the rest. The split is clamped between `codeWidthMin` and
  `codeWidthMax` (10% and 90% by default).
- **Double-click** it to snap back to the initial split.
- It's also **keyboard-operable**: Tab to focus it, then Left/Right arrows
  nudge the split (Shift for bigger steps), Home/End jump to the min/max, and
  Enter resets it.

By default the initial (and reset) position is 50%, i.e. the code panel
covers half the slide's width. Change it with `codeWidth`:

```js
slide.codeViz({
  code: mySnippet,
  visualization: myChart,
  codeWidth: 35, // code panel starts at (and resets to) 35% of the width
  codeWidthMin: 15, // optional: how far the viewer can drag it, in %
  codeWidthMax: 80
})
```

## Running the demo without the mouse

The play/reset control (labeled "▶ Run" / "↺ Reset" by default) can be
triggered from the keyboard instead of clicking it: press **R** anywhere in
the deck and it clicks whichever `.slide-play-button` is present on the
currently displayed slide — so a presenter can stay at the keyboard (e.g.
right after using the arrow keys to navigate to the slide) rather than
reaching for the mouse. "R" was chosen because it isn't used by any of
`slideshow()`'s other built-in shortcuts (arrows/Page Up/Down/N/P for
navigation, O for overview, F for fullscreen, B/V/. for pause, Home/End for
first/last slide).

Customize the labels with the `playLabel`/`resetLabel` options:

```js
slide.codeViz({
  code: mySnippet,
  visualization: myChart,
  playLabel: "▶ Run",
  resetLabel: "↺ Reset"
})
```32:T4025,display("👉 function coreSlideStyle() extended for slide.codeViz")
function coreSlideStyle() {
  return html``;
}33:T2a9b,display("👉 function makeSlide() extended for slide.codeViz");
const joinClassNames = (...names) => names.filter(Boolean).join(" ");

function makeSlide(
  content,
  {className = "", contentClassName = "", ...options} = {},
  defaults = {}
) {
  return {
    ...options,
    content,
    className: joinClassNames(defaults.className, className),
    contentClassName: joinClassNames(
      defaults.contentClassName,
      contentClassName
    )
  };
}

const slide = {
  // Horizontally centred layout with horizontal and vertical centring
  central(content, {position = "mid", className = "", ...options} = {}) {
    if (!["mid", "upper"].includes(position)) {
      throw new RangeError('central position must be "mid" or "upper"');
    }
    return makeSlide(
      content,
      {
        ...options,
        className: joinClassNames(
          position === "upper" && "slide-central--upper",
          className
        )
      },
      {className: "slide-central"}
    );
  },

  //Left-aligned slide content
  left(content, options = {}) {
    return makeSlide(content, options, {className: "slide-body"});
  },

  // Multi-column layout with user-controllable width ratios.
  columns(content, options = {}) {
    return makeSlide(content, options, {
      className: "slide-columns-page",
      contentClassName: "slide-columns"
    });
  },

  // For fitting content to the full size of the slide area preserving aspect ratio.
  fit(content, options = {}) {
    return makeSlide(content, options, {
      className: "slide-fit-page",
      contentClassName: "slide-fit"
    });
  },

  // Code (left) + visualization (right), each in its own titled panel that
  // shares a common background. `codeWidth` is a percentage (0-100,
  // exclusive) controlling how much of the horizontal space the code panel
  // takes; the two panels sit directly adjacent to one another. The
  // play/reset control is overlaid on the top-right corner of the output panel.
  //
  // The play/reset control (labeled "Run"/"Reset" by default) can also be
  // triggered from the keyboard, without touching the mouse: pressing "R"
  // anywhere in the deck clicks whichever slide-play-button is present on
  // the currently displayed slide (see slideshow()'s "r"/"R" key handling).
  //
  // A draggable divider sits on the boundary between the two panels: drag it
  // left/right to resize the code column (clamped to `codeWidthMin`/
  // `codeWidthMax`, default 10%-90%); double-click it to snap back to the
  // initial `codeWidth`. It's also keyboard-operable once focused (Tab to
  // it): Left/Right arrows nudge the split, Home/End jump to the min/max, and
  // Enter or double-tap resets it.
  //
  // `code` may be a string, a function returning a string (sync or async),
  // or already-rendered DOM content. It is rendered with reveal.js's
  // built-in syntax highlighting (highlight.js).
  // `visualization` may be a DOM node, a value displayable by slideshow, or
  // a function (sync or async) returning either, invoked once when the
  // slide is built.
  // `onPlay(info)` is invoked when the button is first pressed; `onReset(info)`
  // is invoked the next time it is pressed, after which the cycle repeats.
  // Both callbacks receive `{...context, code, visualization, button}`, where
  // `code` and `visualization` are the rendered panel-body elements, so a
  // typical handler mutates `visualization` directly (e.g. via a D3
  // transition) rather than re-rendering it from scratch.
  //
  // `colors` optionally overrides, for this slide only, any of the code
  // panel's CSS custom properties (bg, fg, comment, keyword, string, number,
  // title, type, variable, meta) — see the "Customizing the code panel's
  // colors" markdown cell for the full list and examples.
  codeViz(
    {
      code,
      language = "javascript",
      visualization,
      onPlay,
      onReset,
      playLabel = "▶ Run",
      resetLabel = "↺ Reset",
      codeWidth = 50,
      codeWidthMin = 10,
      codeWidthMax = 90,
      codeTitle = "Code",
      vizTitle = "Output",
      codeClassName = "",
      vizClassName = "",
      buttonClassName = "",
      colors = {}
    } = {},
    options = {}
  ) {
    if (!Number.isFinite(codeWidth) || codeWidth <= 0 || codeWidth >= 100) {
      throw new RangeError(
        "codeWidth must be a finite number between 0 and 100 (exclusive)"
      );
    }
    if (
      !Number.isFinite(codeWidthMin) ||
      !Number.isFinite(codeWidthMax) ||
      codeWidthMin <= 0 ||
      codeWidthMax >= 100 ||
      codeWidthMin >= codeWidthMax
    ) {
      throw new RangeError(
        "codeWidthMin/codeWidthMax must satisfy 0 < codeWidthMin < codeWidthMax < 100"
      );
    }

    const content = async (context) => {
      const wrapper = document.createElement("div");
      wrapper.className = "slide-codeviz";

      const clamp = (value) =>
        Math.min(codeWidthMax, Math.max(codeWidthMin, value));

      // Draggable divider between the two panels; resizes the code column by
      // updating the same --code-width custom property used to size it.
      const divider = document.createElement("div");
      divider.className = "slide-codeviz-divider";
      divider.tabIndex = 0;
      divider.setAttribute("role", "separator");
      divider.setAttribute("aria-orientation", "vertical");
      divider.setAttribute(
        "aria-label",
        "Resize code and output panels (double-click to reset)"
      );
      divider.setAttribute("aria-valuemin", String(codeWidthMin));
      divider.setAttribute("aria-valuemax", String(codeWidthMax));

      const currentCodeWidth = () =>
        Number(divider.getAttribute("aria-valuenow")) || codeWidth;

      const setCodeWidth = (percent) => {
        const clamped = clamp(percent);
        wrapper.style.setProperty("--code-width", `${clamped}%`);
        divider.setAttribute("aria-valuenow", String(Math.round(clamped)));
      };

      setCodeWidth(codeWidth);
      for (const [name, value] of Object.entries(colors)) {
        if (value != null) {
          wrapper.style.setProperty(`--slide-code-${name}`, String(value));
        }
      }

      // Code panel: titled header + syntax-highlighted .
      const codePanel = document.createElement("div");
      codePanel.className = joinClassNames("slide-panel", codeClassName);

      const codeTitleBar = document.createElement("div");
      codeTitleBar.className = "slide-panel-title";
      codeTitleBar.textContent = codeTitle;

      const codeNode = document.createElement("pre");
      codeNode.className = "slide-code slide-panel-body";
      const codeEl = document.createElement("code");
      if (language) codeEl.className = `language-${language}`;
      const resolvedCode =
        typeof code === "function" ? await code(context) : code;
      codeEl.textContent = resolvedCode ?? "";
      codeNode.append(codeEl);

      codePanel.append(codeTitleBar, codeNode);

      let dragging = false;
      const beginDrag = () => {
        dragging = true;
        wrapper.classList.add("slide-codeviz--dragging");
      };
      const endDrag = (pointerId) => {
        if (!dragging) return;
        dragging = false;
        wrapper.classList.remove("slide-codeviz--dragging");
        if (pointerId != null && divider.hasPointerCapture?.(pointerId)) {
          divider.releasePointerCapture(pointerId);
        }
      };

      divider.addEventListener("pointerdown", (event) => {
        if (event.button != null && event.button !== 0) return;
        beginDrag();
        divider.setPointerCapture(event.pointerId);
        event.preventDefault();
      });
      divider.addEventListener("pointermove", (event) => {
        if (!dragging) return;
        const rect = wrapper.getBoundingClientRect();
        if (rect.width <= 0) return;
        setCodeWidth(((event.clientX - rect.left) / rect.width) * 100);
      });
      divider.addEventListener("pointerup", (event) => endDrag(event.pointerId));
      divider.addEventListener("pointercancel", (event) =>
        endDrag(event.pointerId)
      );
      divider.addEventListener("dblclick", () => setCodeWidth(codeWidth));
      divider.addEventListener("keydown", (event) => {
        const step = event.shiftKey ? 10 : 2;
        switch (event.key) {
          case "ArrowLeft":
            setCodeWidth(currentCodeWidth() - step);
            break;
          case "ArrowRight":
            setCodeWidth(currentCodeWidth() + step);
            break;
          case "Home":
            setCodeWidth(codeWidthMin);
            break;
          case "End":
            setCodeWidth(codeWidthMax);
            break;
          case "Enter":
          case " ":
            setCodeWidth(codeWidth);
            break;
          default:
            return;
        }
        event.preventDefault();
      });

      const button = document.createElement("button");
      button.type = "button";
      button.className = joinClassNames("slide-play-button", buttonClassName);
      button.textContent = playLabel;
      button.setAttribute("aria-label", "Run");

      // Output panel: titled header + rendered visualization; the play/reset
      // button is overlaid on this panel's top-right corner.
      const vizPanel = document.createElement("div");
      vizPanel.className = joinClassNames("slide-panel", vizClassName);

      const vizTitleBar = document.createElement("div");
      vizTitleBar.className = "slide-panel-title";
      vizTitleBar.textContent = vizTitle;

      const vizNode = document.createElement("div");
      vizNode.className = "slide-viz slide-panel-body";
      const resolvedViz =
        typeof visualization === "function"
          ? await visualization(context)
          : visualization;
      if (resolvedViz != null) {
        for (const item of Array.isArray(resolvedViz)
          ? resolvedViz
          : [resolvedViz]) {
          vizNode.append(item instanceof Node ? item : String(item));
        }
      }

      vizPanel.append(vizTitleBar, vizNode, button);

      let playing = false;
      button.addEventListener("click", async () => {
        button.disabled = true;
        const info = {...context, code: codeNode, visualization: vizNode, button};
        try {
          if (!playing) {
            await onPlay?.(info);
            playing = true;
            button.textContent = resetLabel;
            button.setAttribute("aria-label", "Reset");
          } else {
            await onReset?.(info);
            playing = false;
            button.textContent = playLabel;
            button.setAttribute("aria-label", "Run");
          }
        } finally {
          button.disabled = false;
        }
      });

      wrapper.append(codePanel, divider, vizPanel);
      return wrapper;
    };

    return makeSlide(content, options, {className: "slide-codeviz-page"});
  }
};34:T249a,display("👉 function slideShow() extended for slide.codeViz")
async function slideshow(slides, options = {}) {
  const {
    display,
    invalidation,
    width = 1600,
    height = 900,
    transition = "none",
    plugins: userPlugins = [],
    ...config
  } = options;

  if (typeof display !== "function") {
    throw new TypeError(
      "slideshow requires the calling cell’s display function"
    );
  }

  const frame = html``;
  const root = html`
  
    
  
`;

  frame.append(coreSlideStyle(), root);
  const container = root.querySelector(".slides");
  const cleanups = [];
  const context = {root, frame};
  const resolve = (source) =>
    typeof source === "function" ? source(context) : source;

  const append = async (parent, source) => {
    const value = await resolve(source);
    if (value == null) {
      return;
    }
    if (Array.isArray(value)) {
      for (const item of value) {
        await append(parent, item);
      }
      return;
    }
    parent.append(value instanceof Node ? value : String(value));
  };

  const appendSync = (parent, value) => {
    if (value == null) {
      return;
    }
    if (Array.isArray(value)) {
      for (const item of value) {
        appendSync(parent, item);
      }
      return;
    }
    parent.append(value instanceof Node ? value : String(value));
  };

  const slideSpan = (content, className = "") => {
    const node = document.createElement("div");
    node.className = `slide-span ${className}`.trim();
    appendSync(node, content);
    return node;
  };
  context.span = slideSpan;

  // Binds an input-like DOM element to one locally updated output.
  // Only the output node is replaced; the slide and deck remain intact.
  const view = (input, render, options = {}) => {
    const {className = "", event = "input", immediate = true} = options;
    const output = document.createElement("div");
    output.className = className;
    let [version, disposed] = [0, false];

    const update = async () => {
      const currentVersion = ++version;
      const fragment = document.createDocumentFragment();
      try {
        await append(fragment, render(input.value, input, context));

        // Ignore an obsolete asynchronous result when a newer input event has already started another render.
        if (!disposed && currentVersion === version) {
          output.replaceChildren(fragment);
        }
      } catch (error) {
        if (!disposed && currentVersion === version) {
          const message = document.createElement("pre");
          message.textContent = error?.stack ?? String(error);
          output.replaceChildren(message);
        }
      }
    };
    input.addEventListener(event, update);
    cleanups.push(() => {
      disposed = true;
      input.removeEventListener(event, update);
    });
    if (immediate) {
      update();
    }
    return output;
  };
  context.view = view;

  const descriptorKeys = [
    "content",
    "notes",
    "className",
    "contentClassName",
    "ratios",
    "timing",
    "backgroundImage",
    "backgroundSize",
    "backgroundPosition",
    "backgroundRepeat",
    "backgroundOpacity",
    "backgroundTransition",
    "backgroundColor",
    "backgroundGradient"
  ];

  const setData = (element, values) => {
    for (const [name, value] of Object.entries(values)) {
      if (value != null) {
        element.dataset[name] = String(value);
      }
    }
  };

  for (const item of slides) {
    const isDescriptor =
      item &&
      typeof item === "object" &&
      !(item instanceof Node) &&
      descriptorKeys.some((key) => key in item);

    const {
      content,
      notes,
      className = "",
      contentClassName = "",
      ratios,
      timing,
      backgroundImage,
      backgroundSize = "contain",
      backgroundPosition = "center",
      backgroundRepeat = "no-repeat",
      backgroundOpacity,
      backgroundTransition,
      backgroundColor,
      backgroundGradient
    } = isDescriptor ? item : {content: item};

    const section = document.createElement("section");
    section.className = className;

    if (content != null) {
      const body = document.createElement("div");
      body.className = `slide-content ${contentClassName}`.trim();
      await append(body, content);
      if (body.classList.contains("slide-columns")) {
        const columnCount = [...body.children].filter(
          (child) => !child.classList.contains("slide-span")
        ).length;
        body.style.setProperty(
          "--slide-columns",
          columnTracks(columnCount, ratios)
        );
      }
      section.append(body);
    }

    const resolvedBackgroundImage = await resolve(backgroundImage);
    setData(section, {
      backgroundImage: resolvedBackgroundImage,
      backgroundSize: resolvedBackgroundImage == null ? null : backgroundSize,
      backgroundPosition:
        resolvedBackgroundImage == null ? null : backgroundPosition,
      backgroundRepeat:
        resolvedBackgroundImage == null ? null : backgroundRepeat,
      backgroundOpacity,
      backgroundTransition,
      backgroundColor,
      backgroundGradient
    });

    if (notes != null) {
      const aside = document.createElement("aside");
      aside.className = "notes";
      await append(aside, notes);
      section.append(aside);
    }
    if (timing != null) {
      section.dataset.timing = String(timing);
    }
    container.append(section);
  }

  display(frame);
  const output = frame.parentElement;
  const previousPosition = output?.[slideshowPosition];

  // Always enable reveal.js's built-in code syntax highlighting (highlight.js),
  // in addition to any user-supplied plugins.
  const plugins = [RevealHighlightPlugin(), ...userPlugins];

  const deck = new Reveal(root, {
    ...config,
    width,
    height,
    transition,
    plugins,
    embedded: true,
    keyboard: false
  });

  await deck.initialize();

  // Keep track of current slide and restore to current slide on reinitialisation.
  if (previousPosition && !config.hash && !config.history) {
    deck.slide(previousPosition.h, previousPosition.v, previousPosition.f);
  }
  const rememberPosition = () => {
    if (output) {
      output[slideshowPosition] = deck.getIndices();
    }
  };
  deck.on("slidechanged", rememberPosition);
  rememberPosition();

  const viewport = deck.getViewportElement();
  viewport.classList.add("reveal");
  const onKeydown = (event) => {
    if (
      event.ctrlKey ||
      event.metaKey ||
      event.target.closest?.(
        "input, textarea, select, [contenteditable='true'], .speaker-notes"
      )
    ) {
      return;
    }

    const navigationOptions = {skipFragments: event.altKey};
    switch (event.key) {
      case "ArrowRight":
      case "ArrowDown":
      case "PageDown":
      case "n":
      case "N":
        deck.next(navigationOptions);
        break;

      case "o":
      case "O":
        deck.toggleOverview();
        break;

      case "ArrowLeft":
      case "ArrowUp":
      case "PageUp":
      case "p":
      case "P":
        deck.prev(navigationOptions);
        break;

      case " ":
        if (event.shiftKey) {
          deck.prev(navigationOptions);
        } else {
          deck.next(navigationOptions);
        }
        break;

      case "Home":
        deck.slide(0);
        break;

      case "End":
        deck.slide(deck.getHorizontalSlides().length - 1);
        break;

      case "f":
      case "F": {
        const ownerDocument = viewport.ownerDocument;
        const fullscreen = ownerDocument.fullscreenElement
          ? ownerDocument.exitFullscreen()
          : viewport.requestFullscreen();
        fullscreen.catch((error) => {
          console.warn("Unable to change fullscreen mode.", error);
        });
        break;
      }

      case "b":
      case "B":
      case "v":
      case "V":
      case ".":
        deck.togglePause();
        break;

      // Trigger the current slide's play/reset control (see slide.codeViz)
      // from the keyboard, so a presenter doesn't have to reach for the
      // mouse to click it.
      case "r":
      case "R": {
        const playButton = deck
          .getCurrentSlide()
          ?.querySelector(".slide-play-button:not(:disabled)");
        playButton?.click();
        break;
      }

      default:
        return;
    }
    event.preventDefault();
    event.stopPropagation();
  };

  root.addEventListener("keydown", onKeydown);
  cleanups.push(() => root.removeEventListener("keydown", onKeydown));

  // Make the initialized deck available to deferred renderers and debugging code.
  context.deck = deck;
  frame.deck = deck;

  invalidation?.then(() => {
    rememberPosition();
    deck.off("slidechanged", rememberPosition);
    for (const cleanup of cleanups) {
      cleanup();
    }
    deck.destroy();
  });
}

function columnTracks(count, ratios = []) {
  if (!Array.isArray(ratios)) {
    throw new TypeError("ratios must be an array");
  }
  if (ratios.some((ratio) => !Number.isFinite(ratio) || ratio <= 0)) {
    throw new RangeError("ratios must contain positive finite numbers");
  }
  return Array.from(
    {length: count},
    (_, i) => `minmax(0, ${ratios[i] ?? 1}fr)`
  ).join(" ");
}35:[]
2c:{"id":"0ed0873277b94016","slug":"code-slide-test","title":"Code slide test","thumbnail":"a6377fb415bb71286e5c0afc02f7568ca257c499bf952afabcea2c3b805b39ed","access_level":"public","create_time":"$D2026-09-25T22:56:08.222Z","update_time":"$D2026-09-27T09:33:14.678Z","view_time":null,"first_public_time":"$D2026-09-26T23:13:10.351Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"11bfeb572ddbe905","login":"ambassadors","name":"Observable Ambassadors","avatar_url":"https://avatars-next.observableusercontent.com/93bf798c058a2bf8d3bb90c0754f774b6278b8b16748784f520b07a8800ef772","tier":"pro_2024"},"version":276,"publish_version":276,"role":null,"authored":false,"authors":[{"type":"individual","id":"9ba5e0b68d3e7972","login":"ee2dev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c41b514d64cff7415ffc87106c620e16cefe80b6d853fb3a05e19a000c3612c0","tier":null}],"members":[{"type":"individual","id":"9ba5e0b68d3e7972","login":"ee2dev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c41b514d64cff7415ffc87106c620e16cefe80b6d853fb3a05e19a000c3612c0","tier":null,"role":"editor"},{"type":"team","id":"11bfeb572ddbe905","login":"ambassadors","name":"Observable Ambassadors","avatar_url":"https://avatars-next.observableusercontent.com/93bf798c058a2bf8d3bb90c0754f774b6278b8b16748784f520b07a8800ef772","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Code slide test","cells":[{"id":1,"value":"# Code slide test\n\nBased on [the great slideshow implementation](https://observablehq.com/@jwolondon/observable-embedded-slideshow) by [@jwolondon](https://observablehq.com/@jwolondon). This notebook shows one example to add a code and result slide.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"slideshow([codeVizDemoSlide, slide2, slide3], {invalidation, display})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"### Slides","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"display(\"👉 Creating demo slides\");\nconst codeVizDemoSlide = slide.codeViz({\n  code: demoCircleCode,\n  visualization: () => demoCircleChart(),\n  // language: \"javascript\",\n  // colors: {bg: \"black\", fg: \"deeppink\", keyword: \"green\", string: \"yellow\"},\n  onPlay: playDemoCircle,\n  onReset: resetDemoCircle\n});\n\nconst slide2 = () => md`\n# Introduction\nBoring slides use bullets to introduce their structure\n- Introduction\n- The substance of this presentation\n- Conclusions\n`;\n\nconst slide3 = () =>\n  Plot.plot({\n    marks: [\n      Plot.dot(penguins, {\n        x: \"body_mass_g\",\n        y: \"flipper_length_mm\",\n        fill: \"species\"\n      })\n    ]\n  });","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"### Code to be displayed","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$2e","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"#### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import Reveal from \"npm:reveal.js@6.0.2\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"// Factory that builds reveal.js's built-in syntax-highlighting plugin (highlight.js under the hood).\nimport RevealHighlightPlugin from \"https://cdn.jsdelivr.net/npm/reveal.js@6.0.2/dist/plugin/highlight.mjs\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"#### Extensions for slide.codeViz","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$32","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$33","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$34","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"#### Miscellaneous","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"const slideshowPosition = Symbol(\"slideshow-position\"); // Persistent record of current slide position","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"2","titling":"auto"}}
2d:"$2c:body"