WordPress:- Accessing Gist Snippets

Background

I wanted to share code via Git’s Gist Snippets.

But, was not quite satisfied with its rendering within WordPress.

 

Adding Gist Snippets to WordPress

Outline

  1. Gist ID
    • Git ID ( ID As Body )
    • Git ID ( ID As Attribute )
  2. Gist URL
    • Git URL ( URL As Body )
  3. Script Tag
    • Gist Embedding Code

 

Get Gist ID

Syntactically a Gist URL looks like:-

Here is a sample


As the gistID, is what follows the Organization / User name, the gist Id from our sample URL is f596288c8cf85aa85712227b442ace9c.

 

Sample

Gist ID ( ID as body )

Outline

The syntax is to start the gist’s tag ( ).

The tag’s body will be the gist ID.

Add end the gist’s tag ( ).

Sample

Output
Output – Image
fn main()
{
println!("Hello, world!");
}
view raw helloWorldInRust.rs hosted with ❤ by GitHub

 

Explanation

Works.

 

Gist ID ( ID as Attribute )

Outline

The syntax is to start the gist’s tag (  ).

Add the id attribute.  Assign the git’s id as the value of the id attribute ( )

And, enclose with the closing tag ( ).

Sample

Output
Image

Textual

Please specify a Gist URL or ID.

 

Explanation

Does not work.

 

Git URL ( URL As Body )

Outline

The syntax is to start the gist’s tag ( ), followed by the git’s URL.

And, enclose with the closing tag ( /] ).

Sample

Output

Image

fn main()
{
println!("Hello, world!");
}
view raw helloWorldInRust.rs hosted with ❤ by GitHub
Explanation

Works.

 

Script Tag

Gist – Embedding Code

Outline

Within Gist, one can get an embedding code.

Here is the screenshot:-

We will capture the embedding code and try to use it within WordPress.

Sample

Output
Output-Text
https://gist.github.com/DanielAdeniji/f596288c8cf85aa85712227b442ace9c.js
Output – Image

https://gist.github.com/DanielAdeniji/f596288c8cf85aa85712227b442ace9c.js

 

Explanation

Does not work.

 

Summary

  1. Gist ID
    • Git ID ( ID As Body )
    • Git ID ( ID As Attribute ) 
  2. Gist URL
    • Git URL ( URL As Body )
  3. Script Tag
    • Gist Embedding Code

 

References

  1. WordPress
  2. Quora
    • How can I get the gist id of a code snippet in Github?
      Link
  3. Meta Blogue
    • Sanjeev
      • How To Easily Embed Gist In WordPress Blog Posts
        Link

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s