Jekyll 中看起来像终端的代码块

Posted 2023-03-30

【中文标题】Jekyll 中看起来像终端的代码块

【英文标题】：Terminal-looking code block in Jekyll

【发布时间】：2015-07-22 19:09:23

【问题描述】：

请多多包涵，因为我是 devops/systems 人员，绝对不是 Web 开发人员。

我目前在 Github 页面上运行了一个静态 Jekyll 博客，虽然我使用的主题 (Carte Noire) 有漂亮的代码块和突出显示，但我真的在寻找一个可以用来显示终端命令和他们的输出，基本上类似于 Chef Docs 在他们的教程中使用的来显示他们正在运行的命令：https://learn.chef.io/learn-the-basics/ubuntu/configure-a-resource/

我似乎只能找到 js 终端模拟器，我想要的只是一种在类似终端的窗口中显示带有突出显示的终端命令的方法。另外，最好是带有水平滚动的东西，这样文本就不会环绕。

【问题讨论】：

欢迎来到 Stack Overflow。”要求我们推荐或查找书籍、工具、软件库、教程或其他场外资源的问题对于 Stack Overflow 来说是题外话，因为它们往往会吸引固执己见的答案和垃圾邮件。取而代之的是describe the problem 以及迄今为止为解决它所做的工作。”

【参考方案1】：

查看asciinema。 您应该可以按照the docs 将其嵌入到您的 Jekyll 博客中。

示例：

【参考方案2】：

Jekyll 已经支持语法荧光笔，称为 Pygments 和 Rouge。这些已安装，并且 Pygments 是默认设置。

与其他 JS 实现相比，这样做的好处是您的语法在编译时会突出显示，因此当最终用户看到它时，他们会看到 html + CSS。 无需使用 JS，您的网站也可以很好地为那些没有脚本的用户工作。

相关文档是 here。如果您选择使用pygments，您将需要Python，否则您可以选择使用Ruby 编写的Rouge。如果您不需要大量的语言支持（即，因为我假设您大部分时间都在执行终端命令并且不需要其他语言支持，那么 Rouge 应该就足够了）

请注意，您将需要syntax.css 样式表，如here 所述。在过去，很容易错过将其添加到 HTML 中而无法获得所需结果的情况。之后只需调整这些设置以匹配您网站的风格。

【讨论】：

啊，我能够让 Pygments 正常工作，发现 this answer 展示了如何在 Jekyll 中使用 Pygments 进行滚动。现在我只需要弄清楚如何在顶部添加一个“栏”来显示下面的命令或代码所属的文件或目录。

@JohnKelly 不幸的是，这比 Jekyll 更像是 CSS 和样式问题。我也试过在我的网站上这样做，但没有达到我想要的效果。或者，您可以尝试仅使用 github gists、ideone 或 pastebins 等 3rd 方主机。

【参考方案3】：

您可以从 prism.js 之类的东西开始，如果还没有插件，甚至可以为它编写一个插件。厨师网站真的很整洁。

【讨论】：

谢谢，Prism 似乎具有水平滚动功能，但没有显示每个块的“当前路径”或文件。不幸的是，写一个 prism 插件有点超出我的能力

这是一个不错的codepen.io/tommymcdonald/pen/FiJcI，它具有mac 终端的风格。

【参考方案4】：

如果您对保留特定于上下文的文本颜色感兴趣，您可以使用 Gnome 终端（可能还有其他终端）将终端文本复制为 HTML，然后将此 HTML 粘贴到您的博客文章中。 HTML 应该保留文本颜色，并且可以配置为具有您提到的水平滚动。

更详细的解释可以查看this blog post。