/* BeejBløg */

Sep 7, 2018 - 1 minute read - Comments

Embed Github Content In Post

Intro

Went looking for this quite a bit and was surprised not to find anything obvious. Wondering why github hasn’t provided this directly. Obviously gist embedding is covered in spades… and WordPress has some plugins… why no love for the static web? Maybe it’s just too to easy to bother publishing ;)

Caveats

  • just for markdown so far
  • client side rendering (using ShowdownJs) - no SEO for you
  • using HTML5 “fetch” - modern browser dependency
  • instructions are Hugo leaning but this is vanilla js stuff usable anywhere

Example Usage

12345
* blah blah blah best post evah!

<script id="embed1"> renderMarkdown("embed1", "https://raw.githubusercontent.com/Beej126/PoShSlideshow/master/README.md") </script>

* nailed it!

Demo

src

 1 2 3 4 5 6 7 8 910111213
// github-embed.js
// add this new js file to your Hugo blog's /static/js folder or equivalent

function renderMarkdown(elementId, url) {
    fetch(url).then(function(resp) { resp.text().then(function(text) {
      var div = document.createElement('div');
      var converter = new showdown.Converter();
      div.innerHTML = converter.makeHtml(text);
      //https://stackoverflow.com/a/15081441/813599
      var node = document.getElementById(elementId)
      node.parentNode.insertBefore(div, node.nextSibling);
    })});
  }
123
// add references before the end of </head> in your header.html template
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.8.6/showdown.min.js"></script>
<script src="/js/github-embed.js"></script>

Tags: Blogging WebDev

Self Escalating Batch Oracle vs SQL Server

comments powered by Disqus