Search code examples
javascriptgithubmarkdowngithub-flavored-markdownscribd

How to embed a scribd viewer into GitHub markdown?

I would like to embed a scribd document viewer into a GitHub README.md, but the snippet generated by scribd sharing directly into markdown doesn't render on either on iframe or script html tags:

<iframe class="scribd_iframe_embed" title="Analysis of Corporate Communication" src="https://www.scribd.com/embeds/177533131/content?start_page=1&view_mode=scroll&access_key=key-2h5x537j8hvyx8jd60c8&show_recommendations=false" data-auto-height="true" data-aspect-ratio="0.7080062794348508" scrolling="no" id="doc_28599" width="null" height="null" frameborder="0"></iframe><script type="text/javascript">(function() { var scribd = document.createElement("script"); scribd.type = "text/javascript"; scribd.async = true; scribd.src = "https://www.scribd.com/javascripts/embed_code/inject.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(scribd, s); })();</script>

Is it possible to embed somehow the original scribd provided HTML snippet or to transform this into something digestible to github while it is still rendered as the viewer?

I've seen simplified markdown tags for wordpress, but not sure if it's worth to experiment further with this on github markdown at all without converting the repo into a github.io webpage.

Thanks for your help in advance!

Solution

  • Here are the HTML tags sanitized/removed from a GitHub markdown rendered page:

    jch/html-pipeline/lib/html/pipeline/sanitization_filter.rb#L44-L106

    Any script would be removed.

    See github/markup issue 245

    iframe are not removed though, as illustrated in "Convert GitHub Pages Link to iframe".

    When you publish a code template for a chart or map (or any content) on GitHub Pages, it generates an online link that you can convert into an iframe tag

    1. For any GitHub repository you have published online, go to its Settings page and scroll down to copy its GitHub Pages web address, which will appear in this general format:

      https://USERNAME.github.io/REPOSITORY

    2. Convert it into an iframe by enclosing the link inside quotation marks as the source, and adding both start and end tags, in this general format:

      <iframe src="https://USERNAME.github.io/RESPOSITORY">
</iframe>

    3. If desired, improve the iframe appearance on the secondary site by adding any of these optional attributes, such as width or height (measured in pixels by default, or percentages), or frameborder="0" or scrolling="no", in this general format:

       <iframe src="https://USERNAME.github.io/RESPOSITORY" width="100%" height="400" frameborder="0" scrolling="no"></iframe>