Embedded gists
December 3, 2010 at 10:46 PM by Dr. Drang
I didn’t know before today that you can easily embed a gist1 in your HTML (or Markdown). Here’s the JavaScript smartquotes function I wrote about a couple of weeks ago.
The embed code, available on the gist page, is just this:
<script src="https://gist.github.com/705071.js?file=smarten.js"></script>
The advantages of embedding a gist are:
- You get some syntax highlighting.
- The link to the gist itself is automatically included in the “window dressing” around the code.
- Because it’s dynamically generated content, the embedded gist is always kept up to date.
To me, the disadvantages of embedding the gist this way are:
- It doesn’t fit my color scheme (although that can be changed through CSS).
- It doesn’t include line numbers.
- I can’t look at the code as I write about it because it’s not actually in the file.
Update 12/3/10
Another disadvantage I just learned: the embedded gist doesn’t appear in the RSS feed (not in Google Reader, at least).
As a reminder, this is what source code looks like when I embed it directly in the text of the post:
1: // Change straight quotes to curly and double hyphens to em-dashes.
2: function smarten(a) {
3: a = a.replace(/(^|[-\u2014/(\[{"\s])'/g, "$1\u2018"); // opening singles
4: a = a.replace(/'/g, "\u2019"); // closing singles & apostrophes
5: a = a.replace(/(^|[-\u2014/(\[{\u2018\s])"/g, "$1\u201c"); // opening doubles
6: a = a.replace(/"/g, "\u201d"); // closing doubles
7: a = a.replace(/--/g, "\u2014"); // em-dashes
8: return a
9: };
The styling and toggling of the line numbers are handled by a homegrown system described here and here.
Overall, I prefer keeping the code in the post, but I’ll keep the embedding option in mind.
