8

I'm trying to use the Github Gist API to get all of my gists and embed them on a web page. Each Gist holds a blog post that I contain within the following component:

function BlogEntry(gist)  {
    return (
        <div>
            {gist.createdAt} {gist.id} {gist.description}
            <script src={"https://gist.github.com/seisvelas/" + gist.id + ".js"}></script>
        </div>
    );
}

The first line of the render'd div, {gist.createdAt} {gist.id} {gist.description} works, so I know I'm successfully interacting with the API. However, the second part with the script tag does nothing.

I tried this on a plain HTML document and he pattern <script src="https://gist.github.com/seisvelas/gist_id.js"></script> (which I got from the Gist website itself) does work given a valid gist_id.

I'd guess this has to do with how script tags behave in React components. It hadn't even occurred to me that this would be an issue. Could anyone recommend a simple workaround so I can get these Gists embedded successfully?

Thanks!

Improve this question
4
  • Why are you embedding a <script> tag here? What do you expect this to do? Are you trying to run your gist in this page? Or do you want to just show the code itself? Commented Aug 13, 2019 at 19:36
  • You need to use iframe instead of script. Commented Aug 13, 2019 at 19:36
  • @Code-Apprentice I want to show the contents of the Gist Commented Aug 13, 2019 at 19:38
  • @Clarity That doesn't work, which makes sense. The Gist embed link is a bunch of JS code. Importing it as an iframe won't do the same thing (I tried it, it just renders a blank iframe) Commented Aug 13, 2019 at 19:40

4 Answers 4

Reset to default
6

use this npm package, worked for me.

Step 1: Install the package

npm i react-gist

Step 2: import in your react component

import Gist from "react-gist";

Step 3: put your gist id

 <div>
     <Gist id="f824ffb7bafec535d0b6452179f2d790" />
 </div>

OR

 <div>
     <Gist id='f824ffb7bafec535d0b6452179f2d790' file='java-file' />
 </div>

if you have multiple files in the same gist

<Gist id={string} file={string} />

Where,

  • id {string} Id of the gist file

  • {string} Name of a specific file in a multi-file gist

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

FWIW, I easily got this library working in Gatsby, but had problems with react-embed-gist. One note: the id attribute may need to include your GitHub account name, e.g. :name:/f824ffb7bafec535d0b6452179f2d790.
4

For anyone else who runs into this problem, I resolved it using the npm package react-embed-gist. It's dead simple and looks like this: 

import ReactEmbedGist from 'react-embed-gist';

// Only required attribute is gist
<ReactEmbedGist gist="msaracevic/5d757e2fc72482a9a4a439969500c2eb"
                wrapperClass="gist__bash"
                loadingClass="loading__screen"
                titleClass="gist__title"
                file=".bash_profile.sh"/>

Highly recommend!

Improve this answer

5 Comments

Glad to be of help. In case you are wondering how to do it without the module, I've commented the source code here: github.com/msaracevic/react-embed-gist/blob/master/src/…
@MiroslavSaracevic Thanks for making something awesome! I wouldn't have been able to do my project the way I wanted without react-embed-gist!
Hi, it's not clear how to add the ReactEmbedGist method to a Markdown (or MDX) file that contains the actual text after which I need the Gist to be embedded. Do you know how to do that? (There's no way to 'import' in an MDX file.) Thanks.
According to the MDX readme, you can indeed import in an MDX file: github.com/mdx-js/mdx#example
Thanks, is there a way to display it in dark mode ?
2

This solution lets you embed anything in an iFrame:

import Frame from 'react-frame-component';

<Frame  initialContent="<!DOCTYPE html><html><head></head><body><script src='https://gist.github.com/[YourUsername]/aa7101515bb1586857ca43beac8e0abc.js'></script></body></html>" />

Just replace the gist url in the code above with your own.

Frame component available at: https://www.npmjs.com/package/react-frame-component

Improve this answer

Comments

0

In HTML, a <script> tag embeds JavaScript code into the page to execute. It won't display the code from the URL specified in the src attribute.

The gist object from the Gist API contains all the data you need. Don't try to build the URL yourself. Instead, look at what else is in that gist object. For example, according to the documentation, gist.files is an object that contains information about each file in the gist. The keys in this object are the file names and those contain a content property gives the content of the file So if you have a file named hello.js, you can do gist.files['hello.js'].content. Since you probably don't know the file in advance, you can just loop over the keys of the gist.files object.

In general, when you are consuming an API, you should look carefully at the documentation to see what information it gives you.

Improve this answer

3 Comments

Nope, this is just plain wrong. Put this on a plain HTML document: <script src="https://gist.github.com/seisvelas/0dded61a10f716793645fe152885b5a5.js"></script>. 'display my code' is EXACTLY what it does.
Yes, it executes JS code, but that JS code uses a bunch of document.writes to create an embedded display of a Gist. Just try it yourself and you'll see what I mean instantly. This question has nothing to do with Gist's API.
@seisvelas Ok, I see what you mean. I thought that the link was directly to your code. It's not, though. Instead, it is some JavaScript that executes like you said.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.