NOTE: This project is in flux. As of now (2020-04-07) it works but I may be making changes in the near future. If that happens, I will update this page accordingly.

In particular, the helper site, “https://dc25.github.io/showCode” may also change and, if you use that link directly, in the same way that I have here, your site may stop working. For this reason, I suggest making and using your own copy of that helper site.

A few months back I found myself wanting to discuss (in this blog) some code hosted on github . How could I display the code in the blog? I could have used the jekyll highlight tag and inlined the code but then if the actual code changed, the inlined version would be out of date. There are a couple ways to include the content a github “gist” in a jekyll blog but that also could would need to be kept up to date.

At first I tried to inline the raw github version of the code of interest but that fails because xframe options are set to deny such usage.

To make this work, I created a webpage that would retrieve the content of the url hosting the code and then display it. The web page is currently hosted at “https://dc25.github.io/showCode” and it expects an encoded url as argument with the id “codeURL”. This is a static site that does not depend on a backend server.

The code displayed will be highlighted using code prettify by google.

So, for example, clicking on this link … https://dc25.github.io/showCode?codeURL=https%3A%2F%2Fraw.githubusercontent.com%2Fdc25%2FshowCode%2Fmaster%2Fshow.ts will bring up a page showing typescript code that the showCode site uses to fetch and display online code.

Or (as shown below) the same web page can be embedded in another page using an iframe. I am using some html and css to decorate the iframe.

show.ts view raw


Below is the markdown used to create this page (the prettifier seems to have some trouble with markdown). This includes the javascript that helps set up the content on this page.

2020-03-30-a-web-page-to-show-online-code.markdown view raw


Here is the html included to decorate the displayed code.

iframecode.html view raw


And here is the sass for the css used to style the included html.

_iframecode.scss view raw