Markdown to HTML from GitHub README.md file

Question

My objective is to,

1) Read the Markdown source from README.md file from my GitHub repo.
2) Convert the Markdown into HTML code.
3) Apply the output HTML to a <div>.

only using Client-side technologies.

I know how to convert Markdown code to HTML using jQuery but don't know how to dynamically read the MD source from README.md file from GitHub repo.

Answer 1

1. Get the raw file url of the README.md file from the GitHub repo.
2. Format the url in the following format, http://markdown.io/<url_readme_file>. Let's say the url of my readme.md file is http://raw.github.com/pankajparashar/nerdy-css/master/README.md. Hence, the new url becomes http://markdown.io/http://raw.github.com/pankajparashar/nerdy-css/master/README.md
3. Now use jQuery's load method using this new url and extract the content from #md-content id of the page.

Complete demo of the above steps available here - non-working link removed

Answer 2

1. Go to your GitHub project page
2. Click on your README.md file
3. Now click on the Raw button

The raw file is the actual URL you'll want to load.

Create a PHP (or whatever server-side language you are using) file called load.php specifically for loading remote files (like your RAW file). The PHP script will accept a $_GET['url'] variable. Pass the variable to file_get_contents(), and output the results. Please note, the code below is an extremely simple example.

echo file_get_contents($_GET['url']);

Now, just use the load function in jQuery to bring in the data contents from the PHP file. Your URL will probably be formatted similar to this...

.load("load.php?url=https://raw.github.com/user/project/master/README.md")

Finally, use whatever means you already described to convert to Markdown.

• PHP file_get_contents(): http://php.net/manual/en/function.file-get-contents.php
• jQuery load(): http://api.jquery.com/load/
• More info about bypassing the Same-origin policy: http://www.mikazo.com/2010/09/how-to-getting-around-ajax-same-origin.html

Answer 3

You should check out:

https://github.com/zmckinnon/jquery-gh-readme

It uses the GitHub API to retrieve the contents of the readme using this call:

GET /repos/:owner/:repo/readme

Then it converts the base64 encrypted content.

Then it converts the markdown content to html using marked.