Showing file name in Jekyll with Pygments code highlight - jekyll

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

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>

Answer 2

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.