Version 9

    logo.png

     

    The "Embed source code" tab found in the "Insert Link" dialog allows for source code snippets from GitHub Gist to be embedded in a content here on element14 Community.  This includes blog posts, documents and discussion posts.

     

    Use case:

     

    For those not familiar, GitHub describes their Gist service as:

    Gist is a simple way to share snippets and pastes with others.  All gists are git repositories, so they are automatically versioned, forkable and usable as a git repository.

    It's a very convenient way to share code examples (or really any type of text file) with the advantage of having a revision history.  A good example is I've recently been working on a Python script to display time and temperature using a Raspberry Pi.  I was editing the file, temp.py, directly on the Pi, so a simple solution to share and backup my code was to paste the file's contents into GitHub Gist in my browser. 

     

    This resulted in Gist ID 3673183 being created.  With the "Embed source code" feature, I can now embed my Gist right here in this document:

     

     

    Instructions:

     

    Let's walk through the process of how I embedded the above Gist.  This can be done in a blog post, document or discussion post.

     

    1) Create a new post as usual:

    step1.png

     

    2) Click the "Insert Link" to open the "Insert Link" dialog and click on the "Embed source code" tab:

    step2.png

     

    3) This step and the next demonstrate how to create a new Gist.  Leave the new post page open and navigate in a new tab (or different browser) to GitHub Gist:

    step3.png

     

    4) Paste the source code content into the body of the Gist and fill out the remaining fields as desired:

    step4.png

     

    5) Copy the ID of the Gist and paste into the "Gist ID" field of the "Embed source code" tab and click Insert:

    step5.png

     

    6) The embedded Gist will temporarily be displayed as a link with the Gist ID displayed.  The full content of the Gist will be displayed once the post is created.  Complete editing the post as desired and click "Post Message":

    step6.png

     

    7) The content of the Gist will now be displayed on the page in location where it was inserted:

    step7.png