使用覆盖注释列表

Question

我想在视觉上划分包含十六进制转储划分区域并为其贴上标签。

以下是我目前得到的信息：

这段代码使用彩色盒子对于覆盖和文本位置使它们出现在正确区域的顶部。

虽然我对结果很满意（尽管我愿意不同的 可视化标记十六进制转储的区域），我正在寻找一种使覆盖层更强大的方法。目前，覆盖层是绝对定位的，因此需要相当多的反复试验才能正确定位。这很脆弱：如果我向覆盖层标签添加一些文本或更改底层十六进制转储，覆盖层将不再对齐。

---

下面是代码，我lualatex在 Arch Linux 上使用 1.12.0 成功编译了它：

\documentclass{beamer}

\usepackage{listings}
\usepackage[most]{tcolorbox}
\usepackage[absolute,overlay]{textpos}

\definecolor{codebackground}{HTML}{EFF0F1}
\definecolor{codeforeground}{HTML}{34383C}

\newcommand{\code}[1]{
  \colorbox{codebackground}{\textcolor{codeforeground}{\texttt{{#1}}}}
}

% Hex dump background color
\definecolor{brightyellow}{HTML}{F7F5CD}

% Colors for overlays
\definecolor{fuchsia}{HTML}{8661C1}
\definecolor{pearl}{HTML}{E8E1D5}
\definecolor{darkgreen}{HTML}{204040}
\definecolor{lightolive}{HTML}{DADDC2}
\definecolor{lightlime}{HTML}{D6E6CC}
\definecolor{rose}{HTML}{F15BB5}
\definecolor{softpink}{HTML}{F7E0D3}

\begin{document}

\defverbatim[colored]\lstHexdumpFatNoFile{
  \begin{lstlisting}[ backgroundcolor=\color{brightyellow}, basicstyle=\tiny\ttfamily\color{codeforeground}, ]
00000000  eb 3c 90 6d 6b 66 73 2e  66 61 74 00 02 04 04 00  |.<.mkfs.fat.....|
00000010  02 00 02 00 50 f8 14 00  20 00 02 00 00 00 00 00  |....P... .......|
00000020  00 00 00 00 80 00 29 10  61 b9 be 4d 59 20 44 52  |......).a..MY DR|
00000030  49 56 45 20 20 20 46 41  54 31 36 20 20 20 0e 1f  |IVE   FAT16   ..|
00000040  be 5b 7c ac 22 c0 74 0b  56 b4 0e bb 07 00 cd 10  |.[|.".t.V.......|
00000050  5e eb f0 32 e4 cd 16 cd  19 eb fe 54 68 69 73 20  |^..2.......This |
00000060  69 73 20 6e 6f 74 20 61  20 62 6f 6f 74 61 62 6c  |is not a bootabl|
00000070  65 20 64 69 73 6b 2e 20  20 50 6c 65 61 73 65 20  |e disk.  Please |
00000080  69 6e 73 65 72 74 20 61  20 62 6f 6f 74 61 62 6c  |insert a bootabl|
00000090  65 20 66 6c 6f 70 70 79  20 61 6e 64 0d 0a 70 72  |e floppy and..pr|
000000a0  65 73 73 20 61 6e 79 20  6b 65 79 20 74 6f 20 74  |ess any key to t|
000000b0  72 79 20 61 67 61 69 6e  20 2e 2e 2e 20 0d 0a 00  |ry again ... ...|
000000c0  00 00 00 00 00 00 00 00  00 00 00 00 00 00 00 00  |................|
*
000001f0  00 00 00 00 00 00 00 00  00 00 00 00 00 00 55 aa  |..............U.|
00000200  00 00 00 00 00 00 00 00  00 00 00 00 00 00 00 00  |................|
*
00000800  f8 ff ff ff 00 00 00 00  00 00 00 00 00 00 00 00  |................|
00000810  00 00 00 00 00 00 00 00  00 00 00 00 00 00 00 00  |................|
*
00003000  f8 ff ff ff 00 00 00 00  00 00 00 00 00 00 00 00  |................|
00003010  00 00 00 00 00 00 00 00  00 00 00 00 00 00 00 00  |................|
*
00005800  4d 59 20 44 52 49 56 45  20 20 20 08 00 00 27 b1  |MY DRIVE   ...'.|
00005810  8e 52 8e 52 00 00 27 b1  8e 52 00 00 00 00 00 00  |.R.R..'..R......|
00005820  00 00 00 00 00 00 00 00  00 00 00 00 00 00 00 00  |................|
*
00a00000
    \end{lstlisting}
}

\def\reservedSectorsRegionOverlay{
  \begin{textblock*}{10cm}(0.9cm, 1.8cm)
    \begin{tcolorbox}[enhanced jigsaw, opacityback=0.35, top=0mm,bottom=4.0mm, boxsep=14mm, colframe=fuchsia, colback=fuchsia!40] \begin{tcolorbox}[enhanced jigsaw, colback=pearl,opacityback=0.65, boxrule=0.0pt, left=0mm, right=0mm, boxsep=0mm, halign=center, leftright skip=1cm, colupper=codeforeground]Reserved Sectors Region\end{tcolorbox}\end{tcolorbox}
  \end{textblock*}
}

\def\firstFatOverlay{
  \begin{textblock*}{10cm}(0.9cm, 5.95cm)
    \begin{tcolorbox}[enhanced jigsaw, opacityback=0.35, top=0mm,bottom=0mm, boxsep=1mm, colframe=darkgreen, colback=darkgreen!40] \begin{tcolorbox}[enhanced jigsaw, colback=lightolive, opacityback=0.65, boxrule=0.0pt, left=0mm, right=0mm, top=0.5mm, bottom=0.5mm, boxsep=0mm, halign=center, leftright skip=3.2cm, colupper=codeforeground]\small{First FAT}\end{tcolorbox}\end{tcolorbox}
  \end{textblock*}
}

\def\secondFatOverlay{
  \begin{textblock*}{10cm}(0.9cm, 6.67cm)
    \begin{tcolorbox}[enhanced jigsaw, opacityback=0.35, top=0mm,bottom=0mm, boxsep=1mm, colframe=teal, colback=teal!40 ] \begin{tcolorbox}[enhanced jigsaw, colback=lightlime, opacityback=0.65, boxrule=0.0pt, left=0mm, right=0mm, top=0.5mm, bottom=0.5mm, boxsep=0mm, halign=center, leftright skip=3.2cm,colupper=codeforeground]\small{Second FAT}\end{tcolorbox}\end{tcolorbox}
  \end{textblock*}
}

\def\rootDirectoryOverlay{
  \begin{textblock*}{10cm}(0.9cm, 7.45cm)
    \begin{tcolorbox}[enhanced jigsaw, opacityback=0.35, top=1mm,bottom=0mm, boxsep=1mm, colframe=rose, colback=rose!40] \begin{tcolorbox}[enhanced jigsaw, colback=softpink, opacityback=0.65, boxrule=0.0pt, left=0mm, right=0mm, top=0.5mm, bottom=0.5mm, boxsep=0mm, halign=center, leftright skip=3.2cm, colupper=codeforeground]\small{Root Directory}\end{tcolorbox}\end{tcolorbox}
  \end{textblock*}
}

\frame{
  \frametitle{Brand New FAT16}
  \framesubtitle{Viewed with \code{hexdump -C}}

  \only<1-> \lstHexdumpFatNoFile
  \only<2-> \reservedSectorsRegionOverlay
  \only<3-> \firstFatOverlay
  \only<4-> \secondFatOverlay
  \only<5-> \rootDirectoryOverlay

}
\end{document}

Answer 1

更新：使用tikzmarklisings库

这只是我之前的答案的更新，解决了两个问题。

第一个问题是由于 tcolorbox 覆盖层位于文本之前而导致的。这意味着每个代码部分的标签都位于列表后面。这个问题已经通过将彩色矩形放入选项中来解决overlay，但labels放入的finish选项始终绘制在文本上方。

第二个问题是使用手册引用。这个问题已经tikzmarklistings通过类似方式使用库解决，如下所示Andrew Stacey 的回答。

第三个变化是使用\newtcblisting环境简化代码。

代码如下：

\documentclass{beamer}

\usepackage{listings}
\usepackage[most, hooks]{tcolorbox}
%\usepackage{tikz}
\usetikzlibrary{tikzmark}
\usetikzmarklibrary{listings}

\definecolor{codebackground}{HTML}{EFF0F1}
\definecolor{codeforeground}{HTML}{34383C}

\newcommand{\code}[1]{
  \colorbox{codebackground}{\textcolor{codeforeground}{\texttt{{#1}}}}
}

% Hex dump background color
\definecolor{brightyellow}{HTML}{F7F5CD}

% Colors for overlays
\definecolor{fuchsia}{HTML}{8661C1}
\definecolor{pearl}{HTML}{E8E1D5}
\definecolor{darkgreen}{HTML}{204040}
\definecolor{lightolive}{HTML}{DADDC2}
\definecolor{lightlime}{HTML}{D6E6CC}
\definecolor{rose}{HTML}{F15BB5}
\definecolor{softpink}{HTML}{F7E0D3}

\tikzset{
    labelnode/.style={midway, sharp corners, 
        text opacity=1, fill opacity=.65, fill=#1, font=\small},
    frame/.style={ultra thick, rounded corners, 
        draw=#1, fill=#1!40, fill opacity=.35},
}

\newtcblisting{hexdump}[1][]{%
    enhanced, listing only,
    remember as=mylisting,
    sharp corners, sharp corners, notitle,
    size=minimal, boxrule=0pt,
    colback=brightyellow, colupper=black,
    listing options={%
        name=code, basicstyle=\tiny\ttfamily, firstnumber=1},
    #1,
}

\begin{document}

\begin{frame}[fragile]
  \frametitle{Brand New FAT16}
  \framesubtitle{Viewed with \code{hexdump -C}}

\begin{hexdump}[%
    only=<2->{%
        overlay app={\draw[frame=fuchsia] (pic cs:line-code-0-start) 
                rectangle (pic cs:line-code-16-end);}, 
        finish={\path (pic cs:line-code-0-start) -- node[labelnode=pearl] {Reserved Sectors Region} (pic cs:line-code-16-end);}
    },
    only=<3->{%
        overlay app={\draw[frame=darkgreen] (pic cs:line-code-17-start) 
                rectangle (pic cs:line-code-19-end);},
        finish={\path (pic cs:line-code-17-start) -- node[labelnode=lightolive]{First FAT}  (pic cs:line-code-19-end);}
    },
    only=<4->{%
        overlay app={\draw[frame=teal] (pic cs:line-code-20-start) 
                rectangle (pic cs:line-code-22-end);},
        finish={\path (pic cs:line-code-20-start) -- node[labelnode=lightlime]{Second FAT}  (pic cs:line-code-22-end);}
    },
    only=<5->{%
        overlay app={\draw[frame=rose] (pic cs:line-code-23-start) 
                rectangle (pic cs:line-code-26-end);},
        finish={\path (pic cs:line-code-23-start) -- node[labelnode=softpink]{Root Directory}  (pic cs:line-code-26-end);}
    }
]
00000000  eb 3c 90 6d 6b 66 73 2e  66 61 74 00 02 04 04 00  |.<.mkfs.fat.....|
00000010  02 00 02 00 50 f8 14 00  20 00 02 00 00 00 00 00  |....P... .......|
00000020  00 00 00 00 80 00 29 10  61 b9 be 4d 59 20 44 52  |......).a..MY DR|
00000030  49 56 45 20 20 20 46 41  54 31 36 20 20 20 0e 1f  |IVE   FAT16   ..|
00000040  be 5b 7c ac 22 c0 74 0b  56 b4 0e bb 07 00 cd 10  |.[|.".t.V.......|
00000050  5e eb f0 32 e4 cd 16 cd  19 eb fe 54 68 69 73 20  |^..2.......This |
00000060  69 73 20 6e 6f 74 20 61  20 62 6f 6f 74 61 62 6c  |is not a bootabl|
00000070  65 20 64 69 73 6b 2e 20  20 50 6c 65 61 73 65 20  |e disk.  Please |
00000080  69 6e 73 65 72 74 20 61  20 62 6f 6f 74 61 62 6c  |insert a bootabl|
00000090  65 20 66 6c 6f 70 70 79  20 61 6e 64 0d 0a 70 72  |e floppy and..pr|
000000a0  65 73 73 20 61 6e 79 20  6b 65 79 20 74 6f 20 74  |ess any key to t|
000000b0  72 79 20 61 67 61 69 6e  20 2e 2e 2e 20 0d 0a 00  |ry again ... ...|
000000c0  00 00 00 00 00 00 00 00  00 00 00 00 00 00 00 00  |................|
*
000001f0  00 00 00 00 00 00 00 00  00 00 00 00 00 00 55 aa  |..............U.|
00000200  00 00 00 00 00 00 00 00  00 00 00 00 00 00 00 00  |................|
*
00000800  f8 ff ff ff 00 00 00 00  00 00 00 00 00 00 00 00  |................|
00000810  00 00 00 00 00 00 00 00  00 00 00 00 00 00 00 00  |................|
*
00003000  f8 ff ff ff 00 00 00 00  00 00 00 00 00 00 00 00  |................|
00003010  00 00 00 00 00 00 00 00  00 00 00 00 00 00 00 00  |................|
*
00005800  4d 59 20 44 52 49 56 45  20 20 20 08 00 00 27 b1  |MY DRIVE   ...'.|
00005810  8e 52 8e 52 00 00 27 b1  8e 52 00 00 00 00 00 00  |.R.R..'..R......|
00005820  00 00 00 00 00 00 00 00  00 00 00 00 00 00 00 00  |................|
*
00a00000
\end{hexdump}
\end{frame}
\end{document}

原始答案：

我不知道如何放置tikzmarks在里面listing，但OP列表的这个替代构造可以避免使用textpos包。

本提案建议使用 a tcblisting（而不是 a lstlisting）。由于 atcblisting位于 a 内tcolorbox，因此其frame锚点可用作覆盖区域的参考。这些区域可以通过overlay app列表内的选项绘制，也可以使用onlytcolorbox 选项指定在哪个框架中应用每个区域。

在这种情况下，我们必须使用overlay app（来自hooks库），因为overlays它们不可堆叠，新的将替换以前的。可以overlay app添加所有这些。

所有区域尺寸均已用反复试验的方法定义，但至少它们参考了底层列表而不是一般框架。

\documentclass{beamer}

\usepackage{listings}
\usepackage[most, hooks]{tcolorbox}

\definecolor{codebackground}{HTML}{EFF0F1}
\definecolor{codeforeground}{HTML}{34383C}

\newcommand{\code}[1]{
  \colorbox{codebackground}{\textcolor{codeforeground}{\texttt{{#1}}}}
}

% Hex dump background color
\definecolor{brightyellow}{HTML}{F7F5CD}

% Colors for overlays
\definecolor{fuchsia}{HTML}{8661C1}
\definecolor{pearl}{HTML}{E8E1D5}
\definecolor{darkgreen}{HTML}{204040}
\definecolor{lightolive}{HTML}{DADDC2}
\definecolor{lightlime}{HTML}{D6E6CC}
\definecolor{rose}{HTML}{F15BB5}
\definecolor{softpink}{HTML}{F7E0D3}

\tikzset{
    labelnode/.style={midway, sharp corners, text opacity=1, fill opacity=1, fill=#1!85!black, font=\small},
    frame/.style={ultra thick, rounded corners, draw=#1, fill=#1!40, fill opacity=.35},
}

\begin{document}

\begin{frame}[fragile]
  \frametitle{Brand New FAT16}
  \framesubtitle{Viewed with \code{hexdump -C}}

\begin{tcblisting}{%
    enhanced, listing only, notitle, sharp corners, size=tight, boxrule=0pt, colback=brightyellow, 
    listing options={basicstyle=\tiny\ttfamily}, colupper=codeforeground, top=0pt,
    only=<2->{%
        overlay app={\draw[frame=fuchsia] (frame.north west) 
                rectangle ++(9.85,-4.15) node[labelnode=pearl]{Reserved Sectors Region};}
    },
    only=<3->{%
        overlay app={\draw[frame=darkgreen] ([yshift=-4.3cm]frame.north west) 
                rectangle ++(9.85,-.6) node[labelnode=lightolive]{First FAT};}
    },
    only=<4->{%
        overlay app={\draw[frame=teal] ([yshift=-5.05cm]frame.north west) 
                rectangle ++(9.85,-.6) node[labelnode=lightlime]{Second FAT};}
    },
    only=<5->{%
        overlay app={\draw[frame=rose] ([yshift=-5.8cm]frame.north west) 
                rectangle ++(9.85,-.75) node[labelnode=softpink]{Root Directory};}
    },
}
00000000  eb 3c 90 6d 6b 66 73 2e  66 61 74 00 02 04 04 00  |.<.mkfs.fat.....|
00000010  02 00 02 00 50 f8 14 00  20 00 02 00 00 00 00 00  |....P... .......|
00000020  00 00 00 00 80 00 29 10  61 b9 be 4d 59 20 44 52  |......).a..MY DR|
00000030  49 56 45 20 20 20 46 41  54 31 36 20 20 20 0e 1f  |IVE   FAT16   ..|
00000040  be 5b 7c ac 22 c0 74 0b  56 b4 0e bb 07 00 cd 10  |.[|.".t.V.......|
00000050  5e eb f0 32 e4 cd 16 cd  19 eb fe 54 68 69 73 20  |^..2.......This |
00000060  69 73 20 6e 6f 74 20 61  20 62 6f 6f 74 61 62 6c  |is not a bootabl|
00000070  65 20 64 69 73 6b 2e 20  20 50 6c 65 61 73 65 20  |e disk.  Please |
00000080  69 6e 73 65 72 74 20 61  20 62 6f 6f 74 61 62 6c  |insert a bootabl|
00000090  65 20 66 6c 6f 70 70 79  20 61 6e 64 0d 0a 70 72  |e floppy and..pr|
000000a0  65 73 73 20 61 6e 79 20  6b 65 79 20 74 6f 20 74  |ess any key to t|
000000b0  72 79 20 61 67 61 69 6e  20 2e 2e 2e 20 0d 0a 00  |ry again ... ...|
000000c0  00 00 00 00 00 00 00 00  00 00 00 00 00 00 00 00  |................|
*
000001f0  00 00 00 00 00 00 00 00  00 00 00 00 00 00 55 aa  |..............U.|
00000200  00 00 00 00 00 00 00 00  00 00 00 00 00 00 00 00  |................|
*
00000800  f8 ff ff ff 00 00 00 00  00 00 00 00 00 00 00 00  |................|
00000810  00 00 00 00 00 00 00 00  00 00 00 00 00 00 00 00  |................|
*
00003000  f8 ff ff ff 00 00 00 00  00 00 00 00 00 00 00 00  |................|
00003010  00 00 00 00 00 00 00 00  00 00 00 00 00 00 00 00  |................|
*
00005800  4d 59 20 44 52 49 56 45  20 20 20 08 00 00 27 b1  |MY DRIVE   ...'.|
00005810  8e 52 8e 52 00 00 27 b1  8e 52 00 00 00 00 00 00  |.R.R..'..R......|
00005820  00 00 00 00 00 00 00 00  00 00 00 00 00 00 00 00  |................|
*
00a00000
\end{tcblisting}
\end{frame}
\end{document}

Answer 2

这tikzmarkTikZ 库有自己的库，可将 tikzmark 放在listings代码环境中的各个点。使用此功能，我们可以定义合理自然地覆盖代码某些区域的框。它使用行号，这意味着 beamer 和行号的问题开始出现，但可以使用密钥解决这个问题firstnumber。

\documentclass{beamer}
%\url{https://tex.stackexchange.com/q/593230/86}

\usepackage{tikz}
\usepackage{listings}
\usetikzlibrary{tikzmark,calc}
\usetikzmarklibrary{listings}

\resetcounteronoverlays{lstnumber}

\definecolor{codebackground}{HTML}{EFF0F1}
\definecolor{codeforeground}{HTML}{34383C}

\newcommand{\code}[1]{
  \colorbox{codebackground}{\textcolor{codeforeground}{\texttt{{#1}}}}
}

% Hex dump background color
\definecolor{brightyellow}{HTML}{F7F5CD}

% Colors for overlays
\definecolor{fuchsia}{HTML}{8661C1}
\definecolor{pearl}{HTML}{E8E1D5}
\definecolor{darkgreen}{HTML}{204040}
\definecolor{lightolive}{HTML}{DADDC2}
\definecolor{lightlime}{HTML}{D6E6CC}
\definecolor{rose}{HTML}{F15BB5}
\definecolor{softpink}{HTML}{F7E0D3}

\begin{document}

\begin{frame}[fragile]
  \frametitle{Brand New FAT16}
  \framesubtitle{Viewed with \code{hexdump -C}}

\begin{tikzpicture}[
  remember picture,
  overlay,
  box/.style={
    draw=#1,
    fill=#1!40,
    rounded corners,
    line width=2pt
  }
]
\path<2->[
  box=fuchsia
]
([shift={(-.25,.125)}]pic cs:line-hexdump-0-start)
rectangle
([shift={(.25,-.125)}]pic cs:line-hexdump-16-end);
\path<3->[
  box=darkgreen
]
([shift={(-.25,.125)}]pic cs:line-hexdump-17-start)
rectangle
([shift={(.25,-.125)}]pic cs:line-hexdump-19-end);
\path<4->[
  box=teal
]
([shift={(-.25,.125)}]pic cs:line-hexdump-20-start)
rectangle
([shift={(.25,-.125)}]pic cs:line-hexdump-22-end);
\path<5->[
  box=rose
]
([shift={(-.25,.125)}]pic cs:line-hexdump-23-start)
rectangle
([shift={(.25,-.125)}]pic cs:line-hexdump-26-end);
\end{tikzpicture}

\begin{lstlisting}[
  basicstyle=\tiny\ttfamily,
  name=hexdump,
%  numbers=left,
  firstnumber=1
]
00000000  eb 3c 90 6d 6b 66 73 2e  66 61 74 00 02 04 04 00  |.<.mkfs.fat.....|
00000010  02 00 02 00 50 f8 14 00  20 00 02 00 00 00 00 00  |....P... .......|
00000020  00 00 00 00 80 00 29 10  61 b9 be 4d 59 20 44 52  |......).a..MY DR|
00000030  49 56 45 20 20 20 46 41  54 31 36 20 20 20 0e 1f  |IVE   FAT16   ..|
00000040  be 5b 7c ac 22 c0 74 0b  56 b4 0e bb 07 00 cd 10  |.[|.".t.V.......|
00000050  5e eb f0 32 e4 cd 16 cd  19 eb fe 54 68 69 73 20  |^..2.......This |
00000060  69 73 20 6e 6f 74 20 61  20 62 6f 6f 74 61 62 6c  |is not a bootabl|
00000070  65 20 64 69 73 6b 2e 20  20 50 6c 65 61 73 65 20  |e disk.  Please |
00000080  69 6e 73 65 72 74 20 61  20 62 6f 6f 74 61 62 6c  |insert a bootabl|
00000090  65 20 66 6c 6f 70 70 79  20 61 6e 64 0d 0a 70 72  |e floppy and..pr|
000000a0  65 73 73 20 61 6e 79 20  6b 65 79 20 74 6f 20 74  |ess any key to t|
000000b0  72 79 20 61 67 61 69 6e  20 2e 2e 2e 20 0d 0a 00  |ry again ... ...|
000000c0  00 00 00 00 00 00 00 00  00 00 00 00 00 00 00 00  |................|
*
000001f0  00 00 00 00 00 00 00 00  00 00 00 00 00 00 55 aa  |..............U.|
00000200  00 00 00 00 00 00 00 00  00 00 00 00 00 00 00 00  |................|
*
00000800  f8 ff ff ff 00 00 00 00  00 00 00 00 00 00 00 00  |................|
00000810  00 00 00 00 00 00 00 00  00 00 00 00 00 00 00 00  |................|
*
00003000  f8 ff ff ff 00 00 00 00  00 00 00 00 00 00 00 00  |................|
00003010  00 00 00 00 00 00 00 00  00 00 00 00 00 00 00 00  |................|
*
00005800  4d 59 20 44 52 49 56 45  20 20 20 08 00 00 27 b1  |MY DRIVE   ...'.|
00005810  8e 52 8e 52 00 00 27 b1  8e 52 00 00 00 00 00 00  |.R.R..'..R......|
00005820  00 00 00 00 00 00 00 00  00 00 00 00 00 00 00 00  |................|
*
00a00000
\end{lstlisting}

\begin{tikzpicture}[
  remember picture,
  overlay,
  label node/.style={
    sharp corners,
    fill=#1!85!black,
    font=\small
  },
]
\node<2>[
  label node=pearl
] at
($(pic cs:line-hexdump-0-start)!.5!(pic cs:line-hexdump-16-end)$)
{Reserved Sectors Region};
\node<3>[
  label node=lightolive
] at
($(pic cs:line-hexdump-17-start)!.5!(pic cs:line-hexdump-19-end)$)
{First FAT};
\node<4>[
  label node=lightlime
] at
($(pic cs:line-hexdump-20-start)!.5!(pic cs:line-hexdump-22-end)$)
{Second FAT};
\node<5>[
  label node=softpink
] at
($(pic cs:line-hexdump-23-start)!.5!(pic cs:line-hexdump-26-end)$)
{Root Directory};
\end{tikzpicture}

\end{frame}
\end{document}

要确定要使用的正确标记，您可以取消注释该行numbers=left以显示行号。标记位于行的基线处，因此使用上一行的标记作为框的顶部看起来会更好。

我用过tikzpicture 前代码放置框，这意味着它们位于代码下方，不会遮挡代码。我使用了第二个tikzpicture 后放置标签的代码使得它们位于顶部并且可读。

参考：

• 使用 tikzmark 自动对列表进行背景着色tikzmark 的列表库最初是为了回答这个问题而开发的（请注意，它现在已集成到包中，因此这更多是为了历史连接而不是代码示例）
• 使用行号、“name”和“beamer”覆盖时出现列表问题这涉及到行号和投影仪的问题