@stephansama/remark-asciinema

@stephansama remark-asciinema

A remark plugin that transforms asciinema links into either an embedded asciinema player or screenshot that links to the recording.

Features

• 🪄 Automatically converts asciinema links into:
  • <script> embeds for live asciinema players
  • <img> tags for static cast thumbnails that link to the recording

Example

Before:

Check out this demo: https://asciinema.org/a/12345

After (HTML output):

Check out this demo:
<script
  id="asciicast-12345"
  src="https://asciinema.org/a/12345.js"
  async
></script>

Installation

pnpm install @stephansama/remark-asciinema

Usage

import { remark } from "remark";

import asciinema from "@stephansama/remark-asciinema";

export async function pipeline() {
  const file = await remark()
    .use(asciinema, { embedType: "script" })
    .process("Check out: https://asciinema.org/a/abc123");

  console.info(String(file));
}

Additional notes

Note: After integrating the Remark plugin, ensure you include the necessary asciinema JavaScript and CSS files to enable proper playback and styling. You can load them via UNPKG:

• https://unpkg.com/[email protected]/dist/bundle/asciinema-player.css
• https://unpkg.com/[email protected]/dist/bundle/asciinema-player.min.js

Modules

Module	Description
asciinema	‐
index	‐
utilities	‐