Jekyll 中的终端代码块
Terminal-looking code block in Jekyll
请耐心等待，因为我是一个 devops/systems 人，绝对不是网络开发人员。
我目前在 Github 页面上有一个静态 Jekyll 博客 运行，虽然我使用的主题 (Carte Noire) 有漂亮的代码块和突出显示，但我真的在寻找一个我可以用来显示终端命令及其输出的块，本质上类似于 Chef Docs 在他们的教程中用来显示命令的内容 运行: https://learn.chef.io/learn-the-basics/ubuntu/configure-a-resource/
我似乎只能找到 js 终端仿真器，我想要的只是一种显示终端命令的方法，在类似于终端的 window 中突出显示。另外，最好是水平滚动的东西，这样文本就不会环绕。
您可以从 prism.js 之类的东西开始，如果还没有，甚至可以为它编写一个插件。大厨的网站真工整
Jekyll 已经支持名为 Pygments 和 Rouge 的语法荧光笔。这些已安装，Pygments 是默认设置。
与其他 JS 实现相比，这样做的好处是您的语法在编译时会突出显示，因此当最终用户看到它时，他们会看到 HTML + CSS。 无需使用 JS，您的网站也将非常适合那些无脚本用户。
相关文档是 here。如果您选择使用 pygments，则需要 Python，否则您可以直接使用 Ruby 中写的 Rouge。如果你不需要大量的语言支持（即因为我假设你大部分时间都在执行终端命令并且不需要其他语言支持，Rouge 应该足够了）
请注意，您将需要 syntax.css 样式 sheet，如 here 所述。在过去，很容易错过将其添加到 HTML 而得不到预期结果的情况。之后只是调整这些设置以匹配您网站的风格。
将其嵌入到您的 Jekyll 博客中
如果您有兴趣保留特定于上下文的文本颜色，您可以使用 Gnome 终端（也可能是其他终端）将终端文本复制为 HTML，然后粘贴此 HTML 进入您的博客 post。 HTML 应该保留文本颜色，并且可以配置为水平滚动，如您所提到的。
更详细的解释可以查看this blog post.
请耐心等待，因为我是一个 devops/systems 人，绝对不是网络开发人员。
我目前在 Github 页面上有一个静态 Jekyll 博客 运行，虽然我使用的主题 (Carte Noire) 有漂亮的代码块和突出显示，但我真的在寻找一个我可以用来显示终端命令及其输出的块，本质上类似于 Chef Docs 在他们的教程中用来显示命令的内容 运行: https://learn.chef.io/learn-the-basics/ubuntu/configure-a-resource/
我似乎只能找到 js 终端仿真器，我想要的只是一种显示终端命令的方法，在类似于终端的 window 中突出显示。另外，最好是水平滚动的东西，这样文本就不会环绕。
您可以从 prism.js 之类的东西开始，如果还没有，甚至可以为它编写一个插件。大厨的网站真工整
Jekyll 已经支持名为 Pygments 和 Rouge 的语法荧光笔。这些已安装，Pygments 是默认设置。
与其他 JS 实现相比，这样做的好处是您的语法在编译时会突出显示，因此当最终用户看到它时，他们会看到 HTML + CSS。 无需使用 JS，您的网站也将非常适合那些无脚本用户。
相关文档是 here。如果您选择使用 pygments，则需要 Python，否则您可以直接使用 Ruby 中写的 Rouge。如果你不需要大量的语言支持（即因为我假设你大部分时间都在执行终端命令并且不需要其他语言支持，Rouge 应该足够了）
请注意，您将需要 syntax.css 样式 sheet，如 here 所述。在过去，很容易错过将其添加到 HTML 而得不到预期结果的情况。之后只是调整这些设置以匹配您网站的风格。
如果您有兴趣保留特定于上下文的文本颜色，您可以使用 Gnome 终端（也可能是其他终端）将终端文本复制为 HTML，然后粘贴此 HTML 进入您的博客 post。 HTML 应该保留文本颜色，并且可以配置为水平滚动，如您所提到的。
更详细的解释可以查看this blog post.