Custom Web Development

Github Gist Renderer for BlogCFC

I created a quick renderer for Github Gists for use within BlogCFC entries. You can see it in action right here. If interested just grab the code from the gist below and save it to /org/camden/blog/render/gist.cfc. You can then use

<gist id="[gist id]">

to include the gist in your entry. If you want to constrain the height you can use CSS like:

.gist .gist-file .gist-data {
max-height: 250px;
}

Here is an example of what the output looks like, using the Gist I created to hold the code for the renderer. Feel free to grab it for your own BlogCFC install.

<!---
Save this file as /org/camden/blog/render/gist.cfc
In your entries you can then include a Github gist using the following syntax:
<gist id="[gist id]">
Example: <gist id="1810183"> would embed this gist into a blog entry.
If you want to limit the height of large Gists you can use the following CSS to set a max height:
.gist .gist-file .gist-data {
max-height: 250px;
}
--->
<cfcomponent extends="render" output="false">
<cffunction name="display" output="false" returntype="string" access="public">
<cfargument name="id" required="true" type="string" />
<cfset var html = "" />
<cfsavecontent variable="html">
<cfoutput>
<script src="https://gist.github.com/#arguments.id#.js"></script>
</cfoutput>
</cfsavecontent>
<cfreturn trim(html) />
</cffunction>
</cfcomponent>