Ruby Jekyll中具有终端外观的代码块

请容忍我，因为我是devops/systems人员，绝对不是一个web开发人员

我目前在Github页面上运行一个静态的Jekyll博客，虽然我使用的主题（Carte Noire）有好看的代码块和高亮显示，但我确实在寻找一个可以用来显示终端命令及其输出的块，基本上类似于Chef Docs在其教程中显示其运行的命令：

---

我似乎只能找到js终端仿真器，我想要的只是在类似终端的窗口中显示带高亮显示的终端命令。另外，最好是水平滚动的东西，这样文本就不会环绕

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

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

Jekyll已经支持名为Pygments和Rouge的语法高亮工具。这些都已安装，默认为Pygments

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

这方面的文档是。如果您选择使用

pygments

您将需要Python，否则您可以选择用Ruby编写的

Rouge

。如果您不需要大量的语言支持（也就是说，我假设您大部分时间都在执行终端命令，不需要其他语言支持，那么Rouge就足够了）

---

请注意，您将需要所述的

syntax.css

样式表。在过去，很容易忽略将其添加到HTML中而无法获得所需的结果。之后，只需调整这些设置以匹配您的网站风格。

Jekyll已经支持名为Pygments和Rouge的语法高亮工具。这些都已安装，默认为Pygments

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

这方面的文档是。如果您选择使用

pygments

您将需要Python，否则您可以选择用Ruby编写的

Rouge

。如果您不需要大量的语言支持（也就是说，我假设您大部分时间都在执行终端命令，不需要其他语言支持，那么Rouge就足够了）

请注意，您将需要所述的

syntax.css

样式表。在过去，很容易忽略将其添加到HTML中而无法获得所需的结果。之后，只需调整这些设置以匹配您的网站风格。

请退出。 你应该能够嵌入到你的杰基尔博客根据

例如： 退房。 你应该能够嵌入到你的杰基尔博客根据

例如：

---

谢谢，看起来Prism有水平滚动，但没有显示每个块的“当前路径”或文件。不幸的是，编写prism插件有点超出我的能力。这里有一个很好的mac终端风格的插件。谢谢，prism看起来有水平滚动，但没有显示每个块的“当前路径”或文件。不幸的是，写一个prism插件有点超出我的能力。这是一个很好的mac终端风格的插件。欢迎来到Stack Overflow。“要求我们推荐或查找书籍、工具、软件库、教程或其他非现场资源的问题对于堆栈溢出来说是离题的，因为它们往往会吸引自以为是的答案和垃圾邮件。相反，以及迄今为止为解决此问题所做的工作。“欢迎来到Stack Overflow”。要求我们推荐或查找书籍、工具、软件库、教程或其他非现场资源的问题对于Stack Overflow来说是离题的，因为它们往往会吸引自以为是的答案和垃圾邮件。“啊，我能够让Pygments正常工作，并发现如何在Jekyll中使用Pygments进行滚动。现在我只需要弄清楚如何添加一个”条“向上显示下面的命令或代码所属的文件或目录。@JohnKelly不幸的是，这更多的是CSS和样式问题，而不是Jekyll。”。我也在我的网站上尝试过这样做，但结果并没有达到我想要的效果。或者你也可以尝试使用第三方主机，比如github gists、ideone或pastebins。啊，我能够让Pygments工作，并发现如何在Jekyll中使用Pygments进行滚动。现在我只需要弄清楚如何在顶部添加一个“条”，显示下面的命令或代码所属的文件或目录。@JohnKelly不幸的是，这更多的是CSS和样式问题，而不是Jekyll。我也在我的网站上尝试过这样做，但结果并没有达到我想要的效果。或者，您可以尝试使用第三方主机，如github gists、ideone或pastebins。