add the functionality to add a custom caption (#65)

Author: stefanbauer

README.md

@@ -27,6 +27,7 @@ See http://blairvanderhoof.com/gist-embed/ for all possible ways to use gist-emb
 * Including individual files from a gist
 * Including specific line numbers from a gist
 * Including specific line numbers from a gist and collapse the others
+* Add a caption (filename for example) to a gist
 * Removing all line numbers from a gist
 * Removing the footer from a gist
 * Highlight lines from a gist

gist-embed.js

@@ -37,6 +37,7 @@
         id,
         url,
         file,
+        caption,
         lines,
         linesExpanded,
         loading,
@@ -53,6 +54,7 @@
 
       id = $elem.data('gist-id') || '';
       file = $elem.data('gist-file');
+      caption = $elem.data('gist-caption');
       hideFooterOption = $elem.data('gist-hide-footer') === true;
       hideLineNumbersOption = $elem.data('gist-hide-line-numbers') === true;
       lines = $elem.data('gist-line');
@@ -225,6 +227,19 @@
             }
           }
 
+          // option to show caption
+          if (caption) {
+            var tbody = $responseDiv.find('table tbody');
+            var row = $('<tr></tr>');
+            var captionColumn = $('<td></td>')
+              .attr('style', 'padding: 10px !important; border-bottom: 10px solid white; background-color: #f9f9f9; font-weight: bold;')
+              .html(caption);
+
+            row.append($('<td style="background-color: #f9f9f9; border-bottom: 10px solid white;"></td>'));
+            row.append(captionColumn);
+            tbody.prepend(row);
+          }
+
           // option to remove footer
           if (hideFooterOption) {
             $responseDiv.find('.gist-meta').remove();

gist-embed.min.js

@@ -64,6 +64,12 @@
   <p>Loading a gist with both footer and line numbers removed</p>
   <code data-gist-id="5457629" data-gist-hide-footer="true" data-gist-hide-line-numbers="true"></code>
 
+  <p>Loading a gist with caption</p>
+  <code data-gist-id="5457619" data-gist-caption="this/is/a/sample/path/to/file.extension"></code>
+
+  <p>Loading a gist with caption with footer removed</p>
+  <code data-gist-id="5457619" data-gist-hide-footer="true" data-gist-caption="this/is/a/sample/path/to/file.extension"></code>
+
   <p>Loading a gist with multiple files</p>
   <code data-gist-id="5457635"></code>