Motivation

After we share our files on GitHub, we might want to share the file in our WordPress blog. However, it’s not easy.

Take the jupyter notebook as an example: The naive solution is to convert the jupyter notebook to HTML / markdown, then share the HTML / markdown on WordPress. The drawback of the naive solution is

• You need to link the images in the jupyter notebook to post manually
• You need to repeat these steps if we change the file on GitHub
• The format of the HTML / markdown is not the same as what you see on GitHub and need to fix it manually

Solution

Note: This solution works for all files on Gist (including jupyter notebooks)

Here’s an example for this file (link) on GitHub Gist

Step 1 Copy the Gist Embed Link

It’s on the top right corner of the Gist webpage

<script src="https://gist.github.com/Victoria-Pinzhen-Liao/874bba00b71d0bd4f3032d2f3f6d373a.js"></script>

Step 2: Add a block for WordPress ShortCode

Step 3: Copy and paste the GitHub-Gist’s Embed link into the ShortCode block

False Solutions Online

You can find these solutions online, but they don’t work for me (WordPress version: 6.0.2)

Might be due to a version issue or a compatibility issue.

• False Solution 1: Install plugin Documents from Git, and use ShortCode [git-github-jupyter]
• False Solution 2: Install plugin WP Pusher and plugin ghandic/nbconvert, and use ShortCode [nbconvert]
• False Solution 3: Use GitHub-Gist’s Share link in WP ShortCode (Note: Share link won’t work, need to use embed link)

Example

Looks good : ）