93 lines
3.0 KiB
Plaintext
93 lines
3.0 KiB
Plaintext
- content_for(:title, 'Embedding')
|
|
|
|
markdown:
|
|
|
|
# Embedding the player
|
|
|
|
The asciicasts can easily be embedded on any HTML page. If you want
|
|
to put the recording in your blog post, in your project's documentation or
|
|
in your conference talk slides you can do it by copy-pasting the embed
|
|
script.
|
|
|
|
You can find the embed script on the asciicast's page. It looks like this:
|
|
|
|
<script type="text/javascript" src="https://asciinema.org/a/14.js" id="asciicast-14" async></script>
|
|
|
|
The player shows up right at the place where the script is pasted. Let's look
|
|
at the following markup:
|
|
|
|
<p>This is some text.</p>
|
|
<script type="text/javascript" src="https://asciinema.org/a/14.js" id="asciicast-14" async></script>
|
|
<p>This is some other text.</p>
|
|
|
|
The player will show up as a `div` element with a class "asciicast" between
|
|
the two paragraphs.
|
|
|
|
## Customizing the player
|
|
|
|
The embed script supports several customization options. An option can be
|
|
applied by adding it as a
|
|
<code>data-<em>option-name</em>="<em>option-value</em>"</code> attribute to
|
|
the script tag.
|
|
|
|
### speed
|
|
|
|
The `speed` option alters the playback speed. The default speed is 1 which
|
|
means it plays at the unaltered, original speed.
|
|
|
|
For example, to make the playback 2 times faster than original use the
|
|
following script:
|
|
|
|
<script type="text/javascript" src="https://asciinema.org/a/14.js" id="asciicast-14" async data-speed="2"></script>
|
|
|
|
### size
|
|
|
|
The `size` option alters the size of the terminal font. There are 3 available
|
|
sizes:
|
|
|
|
* small (default)
|
|
* medium
|
|
* big
|
|
|
|
For example, to make the font big use the following script:
|
|
|
|
<script type="text/javascript" src="https://asciinema.org/a/14.js" id="asciicast-14" async data-size="big"></script>
|
|
|
|
### theme
|
|
|
|
The `theme` option allows overriding a theme used for the terminal.
|
|
It defaults to a theme set by the asciicast author (or to "tango" if not set
|
|
by the author). There are 3 available themes:
|
|
|
|
* tango
|
|
* solarized-dark
|
|
* solarized-light
|
|
|
|
For example, to use Solarized Dark theme use the following script:
|
|
|
|
<script type="text/javascript" src="https://asciinema.org/a/14.js" id="asciicast-14" async data-theme="solarized-dark"></script>
|
|
|
|
### autoplay
|
|
|
|
The `autoplay` option allows for automatic playback start when the player
|
|
loads. Accepted values:
|
|
|
|
* 0 / false - do not start playback automatically (default)
|
|
* 1 / true - start playback automatically
|
|
|
|
For example, to make the asciicast auto play use the following script:
|
|
|
|
<script type="text/javascript" src="https://asciinema.org/a/14.js" id="asciicast-14" async data-autoplay="true"></script>
|
|
|
|
### loop
|
|
|
|
The `loop` option allows for looping the playback. This option is usually
|
|
combined with `autoplay` option. Accepted values:
|
|
|
|
* 0 / false - disable looping (default)
|
|
* 1 / true - enable looping
|
|
|
|
For example, to make the asciicast play infinitely use the following script:
|
|
|
|
<script type="text/javascript" src="https://asciinema.org/a/14.js" id="asciicast-14" async data-loop="true"></script>
|