Skip to content

Commit

Permalink
Use better demo in embedding docs
Browse files Browse the repository at this point in the history
  • Loading branch information
ku1ik committed Dec 15, 2023
1 parent 57507c9 commit b81ea42
Showing 1 changed file with 7 additions and 7 deletions.
14 changes: 7 additions & 7 deletions docs/manual/server/embedding.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ To get the inline player snippet for a recording click on the "Share" button on
the recording page. The snippet looks like this:

```html
<script src="https://asciinema.org/a/14.js" id="asciicast-14" async></script>
<script src="https://asciinema.org/a/bJMOlPe5F4mFLY0Rl6fiJSOp3.js" id="asciicast-bJMOlPe5F4mFLY0Rl6fiJSOp3" async></script>
```

The script adds the player to a page at the location of the script itself,
Expand All @@ -40,7 +40,7 @@ to maintain the proportions of the recorded terminal.

Here's how it looks:

<script src="https://asciinema.org/a/14.js" id="asciicast-14" async></script>
<script src="https://asciinema.org/a/bJMOlPe5F4mFLY0Rl6fiJSOp3.js" id="asciicast-bJMOlPe5F4mFLY0Rl6fiJSOp3" async></script>

The look and feel of the inline player defaults to the settings used by the
author on the recording settings page. Many of those can be overriden by using
Expand All @@ -53,12 +53,12 @@ mark (`data-start-at="25"`), play at 2x speed (`data-speed="2"`), and use the
Solarized Dark terminal theme (`data-theme="solarized-dark"`):

```html
<script src="https://asciinema.org/a/14.js" id="asciicast-14" async data-start-at="25" data-speed="2" data-theme="solarized-dark"></script>
<script src="https://asciinema.org/a/bJMOlPe5F4mFLY0Rl6fiJSOp3.js" id="asciicast-bJMOlPe5F4mFLY0Rl6fiJSOp3" async data-start-at="25" data-speed="2" data-theme="solarized-dark"></script>
```

Here's how it looks with those additional options applied:

<script src="https://asciinema.org/a/14.js" id="asciicast-14" async data-loop="true" data-speed="2" data-theme="solarized-dark"></script>
<script src="https://asciinema.org/a/bJMOlPe5F4mFLY0Rl6fiJSOp3.js" id="asciicast-bJMOlPe5F4mFLY0Rl6fiJSOp3" async data-loop="true" data-speed="2" data-theme="solarized-dark"></script>

The list of available options, along with their descriptions, is provided below.
Add them as `data-<option-name>="value"` attributes on the embed `<script>` tag,
Expand Down Expand Up @@ -221,18 +221,18 @@ the recording page. The snippet looks like this:
=== "HTML"

```html
<a href="https://asciinema.org/a/14" target="_blank"><img src="https://asciinema.org/a/14.svg" /></a>
<a href="https://asciinema.org/a/bJMOlPe5F4mFLY0Rl6fiJSOp3" target="_blank"><img src="https://asciinema.org/a/bJMOlPe5F4mFLY0Rl6fiJSOp3.svg" /></a>
```

=== "Markdown"

```markdown
[![asciicast](https://asciinema.org/a/14.svg)](https://asciinema.org/a/14)
[![asciicast](https://asciinema.org/a/bJMOlPe5F4mFLY0Rl6fiJSOp3.svg)](https://asciinema.org/a/bJMOlPe5F4mFLY0Rl6fiJSOp3)
```


Below is the result. It resembles a player with a large play button, but it
simply links to a recording. The preview image is an SVG file, which ensures it
looks great in all contexts and on all screen sizes.

<a href="https://asciinema.org/a/14" target="_blank"><img src="https://asciinema.org/a/14.svg" /></a>
<a href="https://asciinema.org/a/bJMOlPe5F4mFLY0Rl6fiJSOp3" target="_blank"><img src="https://asciinema.org/a/bJMOlPe5F4mFLY0Rl6fiJSOp3.svg" /></a>

0 comments on commit b81ea42

Please sign in to comment.