在 Jekyll 中使用 Pygments 代码高亮显示文件名答案

【问题标题】：Showing file name in Jekyll with Pygments code highlight在 Jekyll 中使用 Pygments 代码高亮显示文件名
【发布时间】：2014-09-17 02:01:35
【问题描述】：

当突出显示已知位置的标准文件时，我想将文件名放在代码块中；最好在顶部。一个假设的例子是

{% highlight apache show_filename=/etc/httpd/conf/httpd.conf %}
.... the file contents ....
{% endhighlight %}

然后将呈现带有文件名前缀的代码块。有没有办法做到这一点？

【问题讨论】：

不，这不是 pygments 提供的一部分。您可以直接在代码块上方添加一个块并将其突出显示为纯文本。
我认为可以通过插件来完成。不过，我对 Ruby 的了解还不够多，无法编写一个。
这个潜在的 jekyll 功能 has been discussed on github，文件名也称为 caption。 – 但是，据我所知，没有可以开箱即用的花哨属性。（不在 pygments 中，不在 rouge 中，没有关于 kramdown 的相关提及......）

标签： jekyll pygments

【解决方案1】：

您可以简单地使用漂亮的 html5 figure 标签。

"HTML 元素表示自包含内容，通常带有标题（figcaption），通常作为一个单元引用。虽然它与主流相关，但它的位置与主流无关. 通常这是在正文中引用的图像、插图、图表、代码 sn-p 或架构，但可以移动到另一页或附录而不影响主要流程。嗯>" MDN > html > figure

<figure>
  <figcaption>File: folderName/fileName.rb</figcaption>
  {% highlight ruby %}
  def print_hi(name)
    puts "Hi, #{name}"
  end
  {% endhighlight %}
</figure>

【讨论】：

【解决方案2】：

另一个更好的解决方案，适用于 kramdown：

>Some/test/xml/file.xml
{:.filename}
{% highlight xml %}
.... the file content ....
{% endhighlight %}

在你的 .css 文件中，你可以用你的代码 sn-p 让它看起来不错，例如这样：

.fileName{
  padding: 0px;
  margin: 0px;
  background-color: #292929;
  color: lightgrey;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  margin-bottom: 0px;
  padding-left: 1em;
  font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
  border-left: 0px;    
}

Here您可以找到有关此 kramdown 功能的更多信息。

【讨论】：