prism: Add file-name info to code block

Hey, it would be awesome to be able to say state which file one is working on, like so:

<pre><code data-file="prism.js">
   ... code
</pre></code>

This would add something like http://prismjs.com/plugins/show-language/ with the filename in it. Although I think it would be nice if it was within the <pre> tag so that it is all group within a main container.

I am writing some posts with lots of code, so for this it would be very nice to be able to add the filenames.

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 4
Comments: 17 (17 by maintainers)

Most upvoted comments

@lukasoppermann You can just add a pseudoelement, like so:

pre[data-file]::before {
  content: attr(data-file);
  position: absolute;
  top: 0;
  right: 0;
}

LeaVerou on Mar 18, 2016