# Kramdown: Highlight the code retrieved from a URL using javascript

**URL:** <https://talk.jekyllrb.com/t/kramdown-highlight-the-code-retrieved-from-a-url-using-javascript/2265>\
**Category:** Help\
**Created:** [October 12, 2018, 9:21pm UTC](https://talk.jekyllrb.com/t/kramdown-highlight-the-code-retrieved-from-a-url-using-javascript/2265 "2018-10-12T21:21:33Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![webscrapperr](https://avatars.discourse-cdn.com/v4/letter/w/e95f7d/32.png) [@webscrapperr](https://talk.jekyllrb.com/u/webscrapperr)\
**Post date:** [October 12, 2018, 9:21pm UTC](https://talk.jekyllrb.com/t/kramdown-highlight-the-code-retrieved-from-a-url-using-javascript/2265/1 "2018-10-12T21:21:33Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![rdyar](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/rdyar/32/710_2.png) [@rdyar](https://talk.jekyllrb.com/u/rdyar)\
**Post date:** [October 12, 2018, 10:01pm UTC](https://talk.jekyllrb.com/t/kramdown-highlight-the-code-retrieved-from-a-url-using-javascript/2265/2 "2018-10-12T22:01:39Z")

</div>

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/](https://simpleordersystem.com/issues/)

---

<div class="post-metadata">

**Author:** ![mmistakes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/mmistakes/32/2169_2.png) [@mmistakes](https://talk.jekyllrb.com/u/mmistakes)\
**Post date:** [October 24, 2018, 4:33pm UTC](https://talk.jekyllrb.com/t/kramdown-highlight-the-code-retrieved-from-a-url-using-javascript/2265/3 "2018-10-24T16:33:34Z")

</div>

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](https://prismjs.com/) or [highlight.js](https://highlightjs.org/) to do what you want.

---

<div class="post-metadata">

**Author:** ![Frank](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/frank/32/26_2.png) [@Frank](https://talk.jekyllrb.com/u/Frank)\
**Post date:** [October 24, 2018, 8:46pm UTC](https://talk.jekyllrb.com/t/kramdown-highlight-the-code-retrieved-from-a-url-using-javascript/2265/4 "2018-10-24T20:46:21Z")

</div>

Suggestions:

- store code snippets on [https://gist.github.com/](https://gist.github.com/) and use [`jekyll-gist`](https://github.com/jekyll/jekyll-gist) plugin
- develop a gem plugin based on [https://github.com/dimitri-koenig/jekyll-plugins/blob/master/remote\_file\_content.rb](https://github.com/dimitri-koenig/jekyll-plugins/blob/master/remote_file_content.rb)