marp-cue 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Daniel Terhorst-North
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,25 @@
+# Recording decks using Markdown
+
+So I seem to have written a markdown-teleprompter-slideshow thing that works insanely well. No autoscroll, this is for 'speaker notes' type scripts rather than verbatim autocue. Gojko Adzic has a [lovely browser tool](https://gojko.net/tools/teleprompter/) for that.
+
+- H2 headings (`##`) separate slides
+- Active bullet highlighted, the rest dim
+- Sub-bullets highlighted a different colour
+- Scrolls current bullet to middle of viewport so it is always centred ('typewriter mode') and you aren't reading up and down the screen
+- Uses MARP, so arrow keys, home/end, clicker all do what you would expect
+- Live update: edit the markdown, view hot-reloads
+- Installable as Chrome or Safari 'app' to remove the browser cruft
+- Theme-able, everything except scroll-centring is CSS
+I am using [MARP](https://marp.app/) to render my Markdown notes as nicely formatted presentation notes with a highlighted bullets.
+
+## Usage
+
+Put the following frontmatter in your Markdown file:
+
+```yaml
+---
+marp: true
+headingDivider: 2
+class: invert
+---
+```

package/cli.js

@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+import { marpCli } from '@marp-team/marp-cli';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+const config = join(dirname(fileURLToPath(import.meta.url)), 'marp.config.js');
+process.exit(await marpCli(['--config', config, ...process.argv.slice(2)]));

package/marp.config.js

@@ -0,0 +1,10 @@
+import teleprompterPlugin from './themes/teleprompter.js';
+
+const config = {
+  engine: teleprompterPlugin,
+  preview: true, // start preview window(s)
+  theme: 'teleprompter',
+  themeSet: 'themes'
+};
+
+export default config;

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "marp-cue",
+  "version": "0.1.0",
+  "description": "Teleprompter-style scrolling for Marp presentations",
+  "author": "Daniel Terhorst-North <daniel@dannorth.net>",
+  "license": "MIT",
+  "keywords": [
+    "marp",
+    "teleprompter",
+    "presentation",
+    "markdown",
+    "slides"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.com/tastapod/marp-cue.git"
+  },
+  "type": "module",
+  "bin": {
+    "marp-cue": "./cli.js"
+  },
+  "files": [
+    "cli.js",
+    "marp.config.js",
+    "themes/",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@marp-team/marp-cli": "^4.2.0"
+  }
+}

package/themes/teleprompter-observer.js

@@ -0,0 +1,29 @@
+const observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+        // Scroll the active bullet to the centre of the viewport
+        if (mutation.attributeName === "data-bespoke-marp-current-fragment" &&
+            mutation.target.tagName === "LI" &&
+            mutation.target.hasAttribute("data-bespoke-marp-current-fragment")
+        ) {
+            mutation.target.scrollIntoView({ block: "center", behavior: "smooth" });
+            continue;
+        }
+
+        // On slide change, centre the active fragment or the heading
+        if (mutation.attributeName === "class" &&
+            mutation.target.classList.contains("bespoke-marp-active")
+        ) {
+            const section = mutation.target.querySelector("section");
+            const selectedLine = section?.querySelector("[data-bespoke-marp-current-fragment]");
+            const heading = section?.querySelector("h1, h2, h3");
+            (selectedLine || heading)?.scrollIntoView({ block: "center", behavior: "instant" });
+            continue;
+        }
+    }
+});
+
+observer.observe(document.body, {
+    attributes: true,
+    attributeFilter: ["data-bespoke-marp-current-fragment", "class"],
+    subtree: true,
+});

package/themes/teleprompter.css

@@ -0,0 +1,27 @@
+/* @theme teleprompter */
+
+@import 'uncover';
+
+/* Dim inactive lines */
+li[data-bespoke-marp-fragment] {
+
+    color: darkgray;
+    visibility: visible;
+
+    /* Highlight current line */
+    &[data-bespoke-marp-current-fragment] {
+        color: white;
+    }
+
+    li[data-bespoke-marp-fragment] {
+        font-size: smaller;
+        &[data-bespoke-marp-current-fragment] {
+            color: cyan;
+        }
+    }
+}
+
+/* Add enough vertical space around the slide to centre the current line */
+section:has([data-bespoke-marp-fragment]) {
+    padding-block: 80vh;
+}

package/themes/teleprompter.js

@@ -0,0 +1,15 @@
+import { readFileSync } from 'fs';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+
+const script = readFileSync(join(dirname(fileURLToPath(import.meta.url)), 'teleprompter-observer.js'), 'utf8');
+
+export default ({ marp }) => {
+    const originalRender = marp.render.bind(marp);
+    marp.render = (...args) => {
+        const result = originalRender(...args);
+        result.html += '<script>' + script + '</script>';
+        return result;
+    };
+    return marp;
+};