Tuesday, July 19, 2011

Embedding piece of syntax highlighted code using Github Gist

Inspired by how Elastician blog by Mitch Garnaat looks like I finally found, how one can quite effectively include piece of syntax highlighted code into blog entry.
Here is sample of embedding highlighted code stored at GitHub gist

Source xml:


XQuery to be run:


Resulting in following elements:


How to do this

  1. Go to https://gist.github.com/
  2. Fill in the fields
    1. Short description of the code (not required)
    2.  file name - extension of the file will determine the language. I guess using filename extemsions from Pygments lexers is what would help in case you are in doubt.
    3. copy paste the code into edit window or use Add another file... to upload the file
  3. Click "Create Public Gist".
    This shows new page with some header and highlighted code
  4. Find the link "embed" on the page and click it.
    It shows short html snippet with content like:
    <script src="https://gist.github.com/1090934.js">
     
    </script>
  5. In your blog entry change to html editing and copy paste this snippet in there
  6. Preview the entry
    Note, that it can take few seconds, till the content is rendered, as it has to be downloaded from another web page.
That is all.
If you have account at github, you can log in before you create the sample code and this allows you to have your name with it, edit the content and release new versions (did not test) and even keep discussion about it at Github website.
Small details to be aware of
  1. The code itself does not live in your blog entry, but elsewhere. This way googling will not point to your entry in blog, but possibly in the Github Gist. At least this is what I assume as I am not aware of robots fetching dynamically created content (I can be wrong).
  2. Your blog entry is dependent on github.
I am sure, one can live happily with this.

1 comment: