Page containing content

Given a target page about.md in the root of of jekyll-blog-demo repo. In this case, it a markdown page for a Jekyll site, but you could reference a file in any programming language.

That will have the following GitHub URLs:

Target output

Set up the target code snippet element with empty text.

<pre><code id="target"></code></pre>

Keep it on one line to avoid unnecessary whitespace.


Use JavaScript to fetch the content and insert it in the empty element.

const USERNAME = 'MichaelCurrin'
const REPO_NAME = 'jekyll-blog-demo'

const path = 'about.md'
const url = `https://github.com/${USERNAME}/${REPO_NAME}/blob/master/${path}`
const resp = await fetch(url)
const content = await resp.text()

const target = document.getElementById('target')
target.innerText = content

Now the code block will look something like:

<pre><code id="target">
---<br>title: About<br>layout: page<br>permalink: /about/<br>---<br><br>This is the base Jekyll theme...

This could be worked into a function called and then used on pages as needed.

See Fetch tutorial.


If you had multiple elements, you could use classes on them and use a JS for loop to process each, instead of relying on known an ID.

Or you could even use a data attribute so the element knows what its file should be.

Or you could add a JS event on the HTML element:

<code onload="codeblock('about.md')"></code>

Note that the example here only displays a code snippet in monospace but plain black and white.

You’ll want to use a library like highlight.js if you want language-specific highlighting like:

<pre><code id="target" class="markdown"></code></pre>

In the case of a Jekyll site, you might know the language when you set up your code fence blocks or highlight Liquid tag.