終端機畫面匯出至網頁的方法

2025-03-21 12:30:00

這篇文章是寫給我自己的，不然我每次都需要搜尋terminal的history回想上次寫文章的時候是如何把終端機(terminal)的文字匯出到文章內的。

較早期的文章中，終端機是以screenshot方式呈現。但使用screenshot的壞處是：畫面中的文字無法被複製，可讀性較低。

要呈現終端機的畫面，許多文檔是搭配asciinema呈現。不過使用asciinema需要架設asciinema-server服務，或是使用該服務的public instance: asciinema.org。

我想將網站使用的外部資源最小化，asciinema的embedded player需要搭配其server服務使用。asciinema目前看起來不太適合blog這種簡單的靜態網站。

且目前的需求只需呈現單一終端機畫面，而非影片。

終端機畫面本身就是一堆文字，由row與column構成。要在網頁呈現終端機畫面，其實就是把文字貼到網頁上。

Welcome to fish, the friendly interactive shell
Type help for instructions on how to use fish
[I] tony@archlinux ~>

直接貼進code block的效果，看起來已經算不錯了。只是缺少了顏色。

搜尋一下，找到一個專門把ASCII escape轉換成HTML的工具：aha

Converts ANSI escape sequences of a unix terminal to HTML code.

wezterm: 取得終端機的畫面的內容

我使用wezterm，取得終端機某個pane中文字內容的方式很容易，就是：
wezterm cli get-text --pane-id <paneId> --escapes

<paneId>可透過環境變數查詢:echo $WEZTERM_PANE

將ASNI escape sequence傳入aha

wezterm cli get-text --pane-id $WEZTERM_PANE --escapes|aha>~/Downloads/out.html

檔案~/Downloads/out.html:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- This file was created with the aha Ansi HTML Adapter. https://github.com/theZiz/aha -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xml+xhtml; charset=UTF-8"/>
<title>stdin</title>
</head>
<body>
<pre>
<span style="font-weight:bold;"></span><span style="font-weight:bold;color:green;">[I]</span> <span style="filter: contrast(70%) brightness(190%);color:green;">tony</span>@archlinux <span style="color:green;">~</span>&gt; <span style="color:blue;">wezterm </span><span style="color:teal;">cli get-text --pane-id </span><span style="filter: contrast(70%) brightness(190%);color:teal;">$WEZTERM_PANE</span><span style="color:teal;"> --escapes</span><span style="color:green;">|</span><span style="color:blue;">aha </span><span style="font-weight:bold;"></span><span style="font-weight:bold;color:teal;">&gt;</span><span style="color:blue;"> </span><span style="font-weight:bold;"></span><span style="font-weight:bold;color:teal;">~/Downloads/out.html

~/Downloads/out.html看起來長這樣：

讓aha只輸出部份HTML tags，而非整個HTML

輸出整個HTML document並不適合嵌入文章，使用iframe(如上方例子)是個方法。文章是以markdown格式撰寫，而Markdown本身可嵌入HTML tags，所以我們可以加入-nflag使aha只輸出<pre></pre>的部份，方便貼上、嵌入至Markdown文件中。

直接將HTML tags置入<pre></pre>後效果如下：

[I] tony@archlinux ~> wezterm cli get-text --pane-id $WEZTERM_PANE --escapes|aha -n
Created by @tony84727