Asciinema player for Slidev

Slidev addon to embed asciinema casts to presentations.

Get started

Create a project

With NPM:

npm init slidev

With Yarn:

yarn create slidev

With pnpm:

pnpm create slidev

Add slidev addon

With NPM:

npm install slidev-addon-asciinema

With Yarn:

yarn add slidev-addon-asciinema

With pnpm:

pnpm add slidev-addon-asciinema

Declare the addon

Either add in your slides.md top frontmatter:

theme: ...
...
addons:
  - slidev-addon-asciinema
---
# Slides markdown

Or add it in your package.json file:

{
  "scripts": {
    
  },
  "slidev": {
    "addons": [
      "slidev-addon-asciinema"
    ]
  }
}

Use it in your presentation

# Example

<Asciinema src="casts/yourcast.cast" />

The parameter src will look for static assets from the public directory. In this example, the file is be located at your-project-root/public/casts/yourcast.cast.

Customize your player

All the asciinema-player's options are available via :playerProps. For example, one could change the speed and the number of lines of player's terminal with:

# Example

<Asciinema src="casts/yourcast.cast" :playerProps="{speed: 2, rows: 23}"/>

Base paths

If you are building your slides for static hosting and you are using a different base path (i.e.: you're using GitHub Pages). The component should work as expected, but remember to include the base path in your vite.config.js file.

slidev build --base /your-base-path

export default {
  base: '/your-base-path',
};

Fonts

You can specify the asciinemaplayer fonts by specifying the terminalFontFamily player prop. Currently, only the following non-default fonts are supported:

• MesloLGS NF

If you want to use a different font, please open an issue or a PR (see example).

Known issues

There are a couple of issues already identified

• Player placeholder is resized after playing cast - #1
• Video's progress does not move in the same place where click happens - #5

Would you like to contribute? Leave a PR! 🚀