To $ or Not to $: 在终端中显示代码片段

在涉及终端（即命令行）的代码文档中，在打算作为命令的代码行前添加 $ 符号非常流行。

就像这样

$ brew install somepackage

这样做是为了模拟您（可能）在命令行上看到的提示符。 这是我的提示符

因此，美元符号 ($) 是人们用来指示“这行代码应该在命令行上运行”的小技巧。

小问题

问题在于，我（而且我敢打赌大多数其他人也会）会从这些文档中复制粘贴这样的命令。

如果我将上面的命令按原样在我的终端中运行...

...它无法运行。 $ 不是一个命令。 如何处理这个问题？ 你只需要知道。 你只需要以前遇到过这个问题，并以某种方式了解到文档实际告诉你的是在命令行中运行命令 brew install somepackage（不带美元符号）。

我称之为“小问题”，因为世界上每个工作中都会出现各种类似的问题。 当我在博客文章中写下 font-size: 2.2rem 时，我不会另外说，“将此声明放在你的 HTML 文件链接的 CSS 文件中的规则集中。” 你只需要知道这些东西。

用 CSS 修复

虽然这只是一个“小问题”，而且技术领域充斥着需要知道的东西，但这并不意味着我们不能尝试修复这个问题并做得更好。

这篇文章的灵感来自于这条推文，它获得了比我想象中更多的点赞

如果你真的觉得在终端命令的文档中添加 $ 符号更容易理解，例如

$ brew install buttnugget

那么 UX 技巧是

code.command::before {
content: "$ ";
}

这样我复制命令时就不会复制它，也不会在实际终端中运行失败。

— Chris Coyier (@chriscoyier) 2021 年 5 月 5 日

为了更详细地说明，我想你可能正在使用类似以下方式标记你的文档

<p>Install package like:</p>

<pre><code class="command">brew install package</code></pre>

现在你可以将 $ 作为伪元素插入，而不是作为实际文本

code.command::before {
  content: "$ ";
}

现在你不仅节省了 HTML 中的一个字符，而且 $ 无法被选中，因为这就是伪元素的工作原理。 现在你在 UX 方面做得更好一些。 即使用户双击该行或尝试全选，他们也不会得到导致复制粘贴错误的 $。

希望他们不会因为无法复制 $ 而同样感到沮丧。😬

所以，总之，就像我这样令人难以置信的设计

用文本修复

很多关于代码的文档都放在 GitHub 这样的公共 Git 代码库上。 你无法访问 CSS 来设置 GitHub 的样式，所以虽然可以使用一些技巧，但你不能直接在里面放置 CSS 代码来设置样式。

我们可能不得不（啊！）使用我们的文字

<p>
  Install the package by entering this 
  command at your terminal:
</p>

<kbd class="command">brew install package</kbd>

其他想法

• 你可能根本不会考虑语法高亮显示。 我认为我从未见过在您输入命令时进行语法高亮显示的终端。
• Eric Meyer 建议 使用 <kbd> 元素，即键盘输入元素。 我喜欢它。 我一直使用 <code>，但我认为 <kbd> 在这里更合适。
• Tim Chase 建议 使用 <span> 并将提示符包含在 HTML 中，以便您可以根据需要对其进行独特地设置样式，包括使用 user-select: none; 使其不可选。
• Justin Searls 有一个 dotfiles 技巧，如果不小心复制粘贴了 $，它会忽略它并运行后面的所有内容。
• Jackson Bates 建议 非常小心地复制粘贴到终端。
• 我了解到 $ 也是一种表示“非特权”命令的方式，而# 用于表示 root 命令。 部分原因是，如果你复制粘贴 root 命令，它将不会运行，因为它会被识别为注释。