Kramdown: Highlight the code retrieved from a URL using javascript

Help
1

I’m creating a blog using GitHub pages and using jekyll+kramdown.

I have a layout called base.html which has all headers, footers, meta, and everything except main body content.

I’m using this layout in the _post (markdown file)
filepath: _posts/2018-10-10-my-first-blog-post.md

---
layout: base
title: My first coding post
---

some description
<div id="mycode"></div>

Here I need to put a code snippet. this code will be fetched from GitHub raw content URL
for e.g https://raw.githubusercontent.com/MagicStack/httptools/master/setup.py
the content type of this url’s response is plain/text. so I’ll get this from javascript/jquery and put inside the div above-mentioned element. something like below -

jQuery.get('https://raw.githubusercontent.com/MagicStack/httptools/master/setup.py', function(data) {
  var text = '```\n' + data + '\n```';  // adding 3 backtick to perform code formatting in markdown?
  $('#mycode').html(text);
});

This is placed in the same markdown file just below the <div id=“mycode” /div> line.
but unfortunately, this is not working. I’m getting as a whole text inside the HTML including even backticks.

So to summarise my problem -
Get a raw code data in plain/text format from a URL and put in markdown with highlighting.

I’d be happy to clarify further if this is still not clear.
PS: I don’t want to use any third party url which changes the content type of raw gitusercontent eg rawgit, etc.

2

jekyll and kramdown are creating your static site at run time - not dynamically on the web so if you are expecting the new code to be formatted it won’t be.

There is a JS library for markdown you can use though - its been a while since I did it so I don’t really remember what I did, but it can be done.

Not sure about the code formatting part. I pull in GH issues onto a page - see below - maybe you can dissect it a bit to see what it is doing and if that will help you:

https://simpleordersystem.com/issues/

3

Kramdown parses Markdown at build time like @rdyar mentioned. It’s not going to ever parse HTML you pull in dynamically to a page that’s already been built.

You’ll have to use something like Prism or highlight.js to do what you want.

4

Suggestions: