Inject Gist into Codepen

inject-gist-into-codepen.js

function embedGist(url) {
  // See duplicate in https://codepen.io/dotherightthingnz/pen/mdPqgda

  // based on https://codersblock.com/blog/customizing-github-gists/
  // TODO: Codepen also has an API: https://blog.codepen.io/documentation/prefill/

  function handleDone(data) {
    const filenames = Object.keys(data.files);

    // const convertor = "https://cdn.jsdelivr.net/npm/remarkable@2.0.1/dist/remarkable.min.js";
    const convertor =
      "https://cdn.jsdelivr.net/remarkable/1.7.1/remarkable.min.js";

    filenames.forEach((filename, index) => {
      let code = data.files[filename].content;
      let filenameId = filename.replace(".", "-");

      if (filename.match(/.css/)) {
        $("head").append(`<style id="${filenameId}">${code}</style>`);
      } else if (filename.match(/.js/)) {
        $("body").append(`<script id="${filenameId}">${code}<\/script>`);
      } else if (filename.match(/.md/)) {
        $("body").append(
          `<script id="${filenameId}" src="${convertor}"><\/script>`
        );

        setTimeout(function () {
          var md = new Remarkable();

          $("body").prepend(md.render(code));
        }, 100);
      } else if (filename.match(/.html/)) {
        $("body").append(code);
      }
    });
  }

  function handleFail(e) {
    console.log(e);
  }

  $.get(url).done(handleDone).fail(handleFail);
}