Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.
When we last upgraded how we handle exporting to GitHub Gists, we asked you folks if you would prefer that we update a Gist if that Pen has been exported before, or if it’s better to create new each time. It was pretty unanimous that updating the Gist would be better, and we agree.
Now, that’s exactly what happens. If you’ve already exported any particular Pen you own as a Gist before, and then you change the code in the Pen, and export it again, the Gist will save a new “Revision”.
This will allow you to track changes in a Pen by seeing the diff between versions.
If you missed the olden days when we saved Pen versions, this is for you. Only this is arguably better since you can see a real diff.
Notes on Usage
Gists will only export directly to your GitHub account if your CodePen account is linked to that GitHub account. In other words, you used our “Sign up with GitHub” button to sign up and use our “Login with Github” button to sign in. If you didn’t do that, never fear! We’re actively working on a way to link/unlink GitHub accounts to CodePen accounts, so you can do it anytime.
Here’s some logical flow stuff for when you export as a Gist:
|You’re logged into CodePen, but you don’t have a linked GitHub account||Creates Anonymous Gist, new each time|
|You’re logged into CodePen, and you do have a linked GitHub account||Creates Gist under your GitHub account, and will do revisions|
|You’re logged into CodePen, and you do have a linked GitHub account, but you’ve logged out of GitHub||Login status on GitHub doesn’t matter. Creates Gist under your GitHub account, and will do revisions|
|You’re not logged into CodePen||Creates Anonymous Gist, new each time, regardless if you are logged into GitHub or not.|
If you accidentally export as an Anonymous Gist on GitHub but didn’t mean to, see the chart above to see if you can. And remember, you can always fork a Gist on GitHub just like you can a Pen on CodePen, so you can always snag a copy if needed.
Another little tidbit: if you happen to delete the Gist on GitHub after you’ve exported it once, CodePen will sense that and create a fresh one if you export again.
You might be familiar with our bookmarklet. On most pages, it opens up a dock on the bottom of the page and you click on blocks of code to add them to the dock, then press the button to move those over to CodePen.
But on some special pages, the bookmarklet just knows what to do and moves the code immediately over to CodePen. It works that way on JSFiddle, for example.
Exported Pens as Gists are now among those special pages. If you are on a Gist page (example), and you click the bookmarklet, it will immediately move it back over into CodePen.
Trick to Include an Image Preview
@CodePen Add a screenshot to an exported gist. Edit the markdown to include: ![ScreenShot](<link to pen>/image/large.png)
— Graham Pyne (@graham_pyne) September 2, 2013
Gist Saving Popup Issues
CodePen tries to open up the newly created or updated Gist for you in a new window. You might see a warning when this happens, along the lines of:
You can always allow CodePen specifically, like:
Notice that we display a link to the Gist as well, so you can always click that if you prefer to leave the popup blocked.