List of keyboard shortcuts + custom shortcuts + gamepad support

[denilsonsa]

When using marp --preview foobar.md, is there a list of keyboard shortcuts available anywhere?

Is it possible to add custom keyboard shortcuts? Why? Because the tiny 8BitDo Zero 2 can be used as a keyboard, but it only sends letters, not arrow keys.

Is it possible to control the presentation using a gamepad?

(Yes, I searched the forums, but found nothing related to these questions.)

[yhatt]

Assuming you are using a bespoke template with Marp CLI, the following keyboard shortcuts are available:

• Space / → / ↓ / PageDown: Next slide
• Shift + → / Shift + ↓ / Shift + PageDown: Next slide with skip remaining fragmented lists on the current slide (ref. marp-team/marp-cli#206)
• Shift + Space / ← / ↑ / PageUp: Previous slide
• Shift + ← / Shift + ↑ / Shift + PageUp: Next slide with skip remaining framented lists on the current slide
• Home: Jump to the first slide
• End: Jump to the last slide
• f / F11: Toggle full-screen (ref)
• p: Open presenter view (ref)

Existing shortcuts cannot customize, but it's possible to add JavaScript to Markdown to simulate pressing a shortcut key when a specific key is pressed. Please note that you have to add a --html option into CLI arguments to include unsafe <script> tag into the output.

# Slide 1

---

# Slide 2

...

<script>
// [Example] WASD navigation: Put the script into the last of Markdown once
document.addEventListener('keydown', (e) => {
  if (e.key === 'd' || e.key === 's') {
    document.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight" })); // Send "ArrowRight" for next slide
  } else if (e.key === 'a' || e.key === 'w') {
    document.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowLeft" })); // Send "ArrowLeft" for previous slide
  }
})
</script>

And also you can write a script for supporting the gamepad through Gamepad API.

[denilsonsa]

Put the script into the last of Markdown once

Any reason to put it only at the last slide?

Also, instead of faking a keyboard event, can I somehow call methods directly on the deck? Or perhaps send a custom event to bespoke?

[yhatt]

Any reason to put it only at the last slide?

No. The script can be placed anywhere. However, it's important to have only one to avoid double-detecting key events.

Also, instead of faking a keyboard event, can I somehow call methods directly on the deck? Or perhaps send a custom event to bespoke?

No. Our bespoke template is not exposing bespoke API methods, for safety reasons on web pages with embedded Marp slides.

[denilsonsa]

More shortcuts (but only in the presenter window):

• + and - will change the text size of the presenter notes. (ref. presenter-view.tsx)

For completeness sake, and for future reference, I'm adding the full code I've used. I had to call .stopPropagation() during capture phase to prevent the f letter from reaching the bespoke template and toggling fullscreen.

// Adding support for 8BitDo Zero 2 keyboard mode.
document.addEventListener("keydown", function(ev) {
  const keymap = {
    e: { key: "ArrowLeft" , code: "ArrowLeft" , shiftKey: false }, // 8BitDo Zero 2: LEFT
    i: { key: "ArrowLeft" , code: "ArrowLeft" , shiftKey: false }, // 8BitDo Zero 2: Y button (left)

    f: { key: "ArrowRight", code: "ArrowRight", shiftKey: false }, // 8BitDo Zero 2: RIGHT
    g: { key: "ArrowRight", code: "ArrowRight", shiftKey: false }, // 8BitDo Zero 2: A button (right)

    c: { key: "ArrowLeft" , code: "ArrowLeft" , shiftKey: true  }, // 8BitDo Zero 2: UP
    h: { key: "ArrowLeft" , code: "ArrowLeft" , shiftKey: true  }, // 8BitDo Zero 2: X button (top)

    d: { key: "ArrowRight", code: "ArrowRight", shiftKey: true  }, // 8BitDo Zero 2: DOWN
    j: { key: "ArrowRight", code: "ArrowRight", shiftKey: true  }, // 8BitDo Zero 2: B button (bottom)

    k: { key: "-" , code: "Minus", shiftKey: false }, // 8BitDo Zero 2: L shoulder button
    m: { key: "+" , code: "Equal", shiftKey: true  }, // 8BitDo Zero 2: R shoulder button
  };
  const options = keymap[ev.key];
  if (options) {
    ev.stopPropagation();
    document.dispatchEvent(new KeyboardEvent("keydown", {
      ...options,
      repeat: ev.repeat,
    }));
    // I don't need to bother with "keyup" events because they are not used by Marp's Bespoke template.
  }
}, { capture: true });

For anyone wanting to do something similar, I recommend using these two tools (that I wrote myself) to figure out the keys and properties:

• Keyboard tester/viewer
• KeyboardEvent.key and KeyboardEvent.code

If anyone wants to add gamepad support, please be my guest and share your code here. Or, even better, consider creating a PR.