GitHub Gist embedded in a WordPress post fetched through WP REST API

Question

After adding an embedded Gist in my WP post, all I see when fetching it through REST API is the embed code, meaning <script src="https://gist.github.com/username/b5f6f2d0xxxxxxxdf9c90cbede0e.js"></script>.

There are solutions to properly render an embedded Gist in WordPress but these solutions work on a WordPress site, not on a non-WP site merely fetching posts from WP.

Any idea how to solve this issue?

EDIT: As per this suggestion, I tried to extract the script tag from the post and re-inject it into the DOM. But, it still doesn't work. Actually even when simply loading my Gist script into a variable then injecting the content into the DOM, it doesn't work. Yet it works with any other script, for example this:

const tag = document.createElement('script');
tag.src = 'https://my-site.com/test.js';
document.querySelector('body').prepend(tag);

But the exact same snippet using instead my Gist URL fails to execute.

Why don't Gist scripts execute when injected into the DOM?

• Meera Datey: Can you provide more details? What non-WP site are you building? Are you using WP has headless CMS? If yes, what frontend technology are you using?
• J. M. Arnold: Does this help you out?

Answer 1

I believe this is because GitHub uses document.write to insert embedded widgets. However document.write should not be used after a webpage is fully loaded.

// https://gist.github.com/nat/5fdbb7f945d121f197fb074578e53948.js
document.write('<link rel="stylesheet" ...')

GitHub also provides jsonp (json + callback) api to fetch gists. Widgets can be built manually using information in the callback.

// https://gist.github.com/nat/5fdbb7f945d121f197fb074578e53948.json?callback=callback001
/**/callback001({"description":"","public":true...

There are already some projects to do these stuff: https://github.com/mstapp/ajax-gist (jquery.ajax-gist.js)

Answer 2

A script is rendered after a page loads, so when you make the rest request in your browser, you're just receiving a JSON response containing the post information. The script isn't executed, since the page hasn't been loaded.

For example, take look at this article. In the example, when he retrieves a post, you get a json response like the one below

JSON Response

The solution for you would be to parse the response, and extract the script tags. Then select the script tag containing the GitHub gist.

Once you have the tag, you can embed it in your non-wp site simply be embedding the tag.

• drake035: Thanks, I understand what you say about extracting the script tag and then re-injecting it into the DOM. However, once reinjected in the DOM won't it fail to be executed as well, meaning simply appear in the DOM as "<script>...</script>" without actually being executed?
• Rahul Iyer: @drake035 I was under the impression you were making the api calls from the server, not the client, so thought that you could extract and embed it on your pages from the server, and then simply serve the page when the client requests it. If you need to do it from the client after page load, there seem to be a number of solutions such as : stackoverflow.com/questions/19737031/…
• drake035: Thanks. Just used stackoverflow.com/a/19737116/871404 (createElement, appendChild...) to insert my Gist into the DOM. I now see the script tag exactly where I inserted it. But... It doesn't execute, it just there doing nothing. Am I missing something?
• Rahul Iyer: @drake035 without seeing your code I can’t say. I suggest you create a new post describing your effort to add the script after page load, as well as a minimal amount of code to reproduce your problem. If you do so, I’m sure several people will be able to chime in since that is a more common problem. As I’m falling asleep and typing from my phone, I won’t be able to respond for a while 😴💤