Embedding Code Pen and GitHub Content in an Angular Template
My desire to make my notes public and still useful (to me) led me to embedding Code Pen and GitHub “gists” in my entries. This embedding stuff used to be drop-dead simple on every other Blog platform—but now, since I am building my own thing, my technology mix (yet again) has hit a bit of a brick wall. My current Blog platform is based on Angular JS—and by default Angular “sanitizes” the HTML it displays. This means it will not, by default, display embedding.
The solution to this problem is in my Code Pen below:
See the Pen Embedding Code Pen and GitHub Content in an Angular Template by Bryan Wilhite (@rasx) on CodePen.
K. Scott Allen covers the Angular theory behind this issue quite well in, “A Journey With Trusted HTML in AngularJS.” I am using angular-embed-codepen by Jurgen Van de Moere and angular-gist by Scott Corgan. Both of these projects are bower packages and I must point out that there are other GitHub projects similar to angular-gist but the ones I’ve seen take a dependency on jQuery.