5 files changed, 31 insertions, 0 deletions
diff --git a/web_src/js/markup/asciicast.js b/web_src/js/markup/asciicast.js
new file mode 100644
index 0000000000..d77c05b7aa
--- /dev/null
+++ b/web_src/js/markup/asciicast.js
@@ -0,0 +1,14 @@
+export async function renderAsciinemaPlayer() {
+  const els = document.querySelectorAll('.asciinema-player-container');
+  if (!els.length) return;
+
+  const player = await import(/* webpackChunkName: "asciinema-player" */'asciinema-player');
+
+  for (const el of els) {
+    player.create(el.getAttribute('data-asciinema-player-src'), el, {
+      // poster (a preview frame) to display until the playback is started.
+      // Set it to 1 hour (also means the end if the video is shorter) to make the preview frame show more.
+      poster: 'npt:1:0:0',
+    });
+  }
+}
diff --git a/web_src/js/markup/content.js b/web_src/js/markup/content.js
index 319c229385..e4ec3d0b4b 100644
--- a/web_src/js/markup/content.js
+++ b/web_src/js/markup/content.js
@@ -1,6 +1,7 @@
 import {renderMermaid} from './mermaid.js';
 import {renderMath} from './math.js';
 import {renderCodeCopy} from './codecopy.js';
+import {renderAsciinemaPlayer} from './asciicast.js';
 import {initMarkupTasklist} from './tasklist.js';
 
 // code that runs for all markup content
@@ -8,6 +9,7 @@ export function initMarkupContent() {
   renderMermaid();
   renderMath();
   renderCodeCopy();
+  renderAsciinemaPlayer();
 }
 
 // code that only runs for comments
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 646cf4e60e..4bcaf8dd04 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -470,6 +470,10 @@
       pre {
         overflow: auto;
       }
+
+      .asciicast {
+        padding: 5px !important;
+      }
     }
 
     .sidebar {
diff --git a/web_src/less/index.less b/web_src/less/index.less
index 2d670ac2d5..185bf7ca31 100644
--- a/web_src/less/index.less
+++ b/web_src/less/index.less
@@ -13,6 +13,7 @@
 @import "./markup/content.less";
 @import "./markup/codecopy.less";
 @import "./code/linebutton.less";
+@import "./markup/asciicast.less";
 
 @import "./chroma/base.less";
 @import "./chroma/light.less";
diff --git a/web_src/less/markup/asciicast.less b/web_src/less/markup/asciicast.less
new file mode 100644
index 0000000000..468f0b4f3f
--- /dev/null
+++ b/web_src/less/markup/asciicast.less
@@ -0,0 +1,10 @@
+@import "../asciinema-player/dist/bundle/asciinema-player.css";
+
+.asciinema-player-container {
+  width: 100%;
+  height: auto;
+}
+
+.asciinema-terminal {
+  overflow: hidden !important;
+}