Jekyll中的终端代码块

Question

请耐心等待我，因为我是一个开发人员/系统人员，绝对不是网络开发人员。

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

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

Answer 1

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

Answer 2

Jekyll 已经支持语法荧光笔，名为 Pygments 和 Rouge 。这些已安装，Pygments是默认值。

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

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

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

Answer 3

结帐asciinema。 您应该能够按照the docs将其嵌入到Jekyll博客中。

实施例：