Slidev-addon-asciinema NPM

Asciinema player for Slidev

Slidev addon to embed asciinema casts to presentations.

demo

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: