Embedding Gists
Several years ago, I decided hosting my own blogs made sense because WordPress didn’t allow me to leverage plug-ins to format code blocks with GeSHi formatting. That was fine to a point. Although, the GeSHi formatting plug-in had some limits that I didn’t like and didn’t want to take the time to fix. The future was moving reusable code artifacts to a GitHub Gist repository.
I created this https://gist.github.com/maclochlainn Gist repository for the blog and implemented in this Common Lookup post from yesterday. As time allows, I’ll start shifting the reusable artifacts to the Gist repository from my blog. The change will be virtually unnoticeable because I’m leveraging a sweet piece of JQuery written by my son Joseph that lets you embed Gists in a web page.
There was just a little housekeeping to get Joseph’s JQuery to work smoothly with my WP-Syntax (contributed by Ryan McGeary – kudos for great work). More or less, beyond Jospeh’s instructions, I needed to add these into the WordPress theme’s style.css file when it was a relative reference. The JSON no longer requires this CSS modification, and it’s here in case somebody wants to do something different on their own.
/* Added for Gist code highlighting */ .gist{color:#000; font-size:13px} .gist .gist-file{border:1px solid #dedede;font-family:"Menlo", Consolas, "Liberation Mono", Courier, monospace;margin-bottom:1em} .gist .gist-file .gist-data{overflow:auto;word-wrap:normal;background-color:#f8f8ff;border-bottom:1px solid #ddd;font-size:100%} .gist .gist-file .gist-data .line_data{padding:.5em !important} .gist .gist-file .gist-data pre{font-family:Consolas, "Liberation Mono", Courier, monospace;background:transparent !important;border:none !important;margin:0 !important;padding:0 !important} .gist .gist-file .gist-data .gist-highlight{background:transparent !important} .gist .gist-file .gist-data .line_numbers{background-color:#ececec;color:#aaa;border-right:1px solid #ddd;text-align:right;padding:.5em} .gist .gist-file .gist-data .line_numbers span{clear:right;display:block} .gist .gist-file .gist-data .gist-line-numbers span{clear:right;display:block} .gist-syntax{background:#ffffff} .gist-syntax .c{color:#999988;font-style:italic} .gist-syntax .err{color:#a61717;background-color:#e3d2d2} .gist-syntax .k{color:#000000;font-weight:bold} .gist-syntax .o{color:#000000;font-weight:bold} .gist-syntax .cm{color:#999988;font-style:italic} .gist-syntax .cp{color:#999999;font-weight:bold} .gist-syntax .c1{color:#999988;font-style:italic} .gist-syntax .cs{color:#999999;font-weight:bold;font-style:italic} .gist-syntax .gd{color:#000000;background-color:#ffdddd} .gist-syntax .gd .x{color:#000000;background-color:#ffaaaa} .gist-syntax .ge{color:#000000;font-style:italic} .gist-syntax .gr{color:#aa0000} .gist-syntax .gh{color:#999999} .gist-syntax .gi{color:#000000;background-color:#ddffdd} .gist-syntax .gi .x{color:#000000;background-color:#aaffaa} .gist-syntax .go{color:#888888} .gist-syntax .gp{color:#555555} .gist-syntax .gs{font-weight:bold} .gist-syntax .gu{color:#aaaaaa} .gist-syntax .gt{color:#aa0000} .gist-syntax .kc{color:#000000;font-weight:bold} .gist-syntax .kd{color:#000000;font-weight:bold} .gist-syntax .kp{color:#000000;font-weight:bold} .gist-syntax .kr{color:#000000;font-weight:bold} .gist-syntax .kt{color:#445588;font-weight:bold} .gist-syntax .m{color:#009999} .gist-syntax .s{color:#d14} .gist-syntax .na{color:#008080} .gist-syntax .nb{color:#0086B3} .gist-syntax .nc{color:#445588;font-weight:bold} .gist-syntax .no{color:#008080} .gist-syntax .ni{color:#800080} .gist-syntax .ne{color:#990000;font-weight:bold} .gist-syntax .nf{color:#990000;font-weight:bold} .gist-syntax .nn{color:#555555} .gist-syntax .nt{color:#000080} .gist-syntax .nv{color:#008080} .gist-syntax .ow{color:#000000;font-weight:bold} .gist-syntax .w{color:#bbbbbb} .gist-syntax .mf{color:#009999} .gist-syntax .mh{color:#009999} .gist-syntax .mi{color:#009999} .gist-syntax .mo{color:#009999} .gist-syntax .sb{color:#d14} .gist-syntax .sc{color:#d14} .gist-syntax .sd{color:#d14} .gist-syntax .s2{color:#d14} .gist-syntax .se{color:#d14} .gist-syntax .sh{color:#d14} .gist-syntax .si{color:#d14} .gist-syntax .sx{color:#d14} .gist-syntax .sr{color:#009926} .gist-syntax .s1{color:#d14} .gist-syntax .ss{color:#990073} .gist-syntax .bp{color:#999999} .gist-syntax .vc{color:#008080} .gist-syntax .vg{color:#008080} .gist-syntax .vi{color:#008080} .gist-syntax .il{color:#009999} /* End gist highlighting */ /* To resolve Geshi plug-in conflict. */ td.line-numbers {background:rgb(236,236,236)!important; border-right: 1px solid rgb(170,170,170)!important;text-align:right!important;padding:6px!important;color:rgb(170,170,170)!important;} td.line-data {padding:6px!important;} |
Also, Joseph and I discovered that there was a problem with changing style sheets on the github.com site. Joseph added the following but may not update his blog right away, so here’s the JavaScript for your WordPress header:
After completing this, I noticed that there’s a WordPress Plugin for embedding gists. Naturally, it’s probably simple to use it but I like the control and performance of this solution. I hope this make the pages load a bit faster, and readers use code that they’d like to test.
Subscribe via RSS