Showing file name in Jekyll with Pygments code hig

Question

When highlighting a standard file at a known location I'd like to put the file name in the code block; preferably at the top. A hypothetical example would be

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

which would then render a code block with a filename prefixed. Is there a way to accomplish this?

Answer 1

Another, a bit nicer solution which will work with kramdown:

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

And in you .css file you can make it look nice with your code snippet, for example like this:

.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 you can find more info about this kramdown feature.

Answer 2

You can simply use the nice html5 figure tag.

"The HTML Element represents self-contained content, frequently with a caption (figcaption), and is typically referenced as a single unit. While it is related to the main flow, its position is independent of the main flow. Usually this is an image, an illustration, a diagram, a code snippet, or a schema that is referenced in the main text, but that can be moved to another page or to an appendix without affecting the main flow." MDN > html > figure

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