/* * Add this to the top of your post. This will get interpreted in and applies to your page * e.g. * * (this code) * * # My Summer Vacation * * ## Grandma's House * * We left for Grandma's house at 2pm on Friday. I was so excited to see her pet Bear and Fox! */
var fixGistRules = [ ".gist .gist-highlight { border-left: 3ex solid #eee; position: relative;}", ".gist .gist-highlight pre { counter-reset: linenumbers;}", ".gist .gist-highlight pre div:before { color: #aaa; content: counter(linenumbers); counter-increment: linenumbers; left: -3ex; position: absolute; text-align: right; width: 2.5ex;}" ];
var head = document.getElementsByTagName('head')[0], style = document.createElement('style');
rules = new Array(); var i=0; for ( i=0; i< fixGistRules.length; i++ ){ var fullrule = document.createTextNode(fixGistRules[i]); rules.push(fullrule); } style.type = 'text/css'; for ( var i=0; i< rules.length; i++ ){ if(style.styleSheet){ style.styleSheet.cssText = rules[i].nodeValue; }else { style.appendChild(rules[i]); head.appendChild(style); } }
I've been working on a post here for C5 and in order to make my points, I was referencing gists hosted by GitHub. When those gists were shown as embeds, the line numbers, and thus the clarity of my documentation, was lost. We use Markdown for the creation of the texts so I needed something I could write inside of a Markdown post that would be applied as CSS.
Thanks to these tips:
I was able to come up with the following: