How to embed GitHubGist Code into your WordPress

Background

Have you ever wondered what is the best way to share the coding work you’ve done? Have you thought about you want to share only the part of your codes or perhaps he full details of your code?

Have you had an experience on looking for a WordPress Plugin to support the code format?

One option to maintain this less difficult is to use the GistPress plugin. Thanks to this website, By using the GitPress plugin, you can use the WordPress ShortCode block to embed the code written in GitHubGist.

Setup

1. Install the GistPress plugin and activate it. (Refer to this site on how to install WordPress plugin)
2. Create a new GitHubGist file here. (Make sure you have a GitHub account)
3. Once you have completed your coding in the GitHubGist, make that file a public gist by clicking the “Create a public gist)
4. Once the Gist file is created, it should have generated a custom URL. You will need the id portion of it. (e.g. https://gist.github.com/[username]/4509aa990c4fdfd301869693c7f1c9bf
5. Keep that id.

Embedding the full code

Once you have the file created in GitHubGist, you can embed the GitHubGist Code into your WordPress by using the WordPress Shortcode block. Create a new block in WordPress and enter such as below:

gist id="4509aa990c4fdfd301869693c7f1c9bf" 

Note: don't forget to wrap with the bracket []

This will embed your code as below:

Highlighting the line(s) in the code

You can also use highlights by adding highlight=”[line]” parameter in the short code. Such as:

gist id="4509aa990c4fdfd301869693c7f1c9bf" highlight="2"

gist id="4509aa990c4fdfd301869693c7f1c9bf" highlight="2-3"

Highlighting a single line (use highlight=”[line]”)

Highlighting multilines (use highlight=”[starting line]-[ending line]”)

If you want to just show the portion of your code, you can limit the lines you want to display by using the lines=”[starting line]-[ending line]”

gist id="4509aa990c4fdfd301869693c7f1c9bf" lines="2-3"

Feel free to share this post!