CODEWITHSUNDEEP
jqueryhtmlmarkdown
Pankaj Parashar
Pankaj Parashar

Reputation: 10232

Markdown to HTML from GitHub README.md file

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.

Upvotes: 8

Views: 12859

Answers (4)

Pankaj Parashar
Pankaj Parashar

Reputation: 10232

  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

Upvotes: 5

Anwar Faiz
Anwar Faiz

Reputation: 1

It is noteworthy to understand that HTML does work in the ReadMe.md file. With this clear understanding, I guess many of such questions would be automatically answered like - how to make bold font in ReadMe file, or how to insert image etc. Also note that it depends a lot on what application/ text editor you are using and also lot on the OS. Recently I had trouble in inserting blank line character in the Readme.md file of Github.

I personally preferred < br /> tag there, and i have a full post describing the same: http://www.w3lc.com/2017/05/new-line-in-readme-file-github-fixing.html

I have demonstrated the change in a git commit in the Github repository explained in the post. This understanding is much needed to handle the question and also to find many other uses of why you would probably need to do it!

Further, to answer your question straight, you need two steps: 1. Find the Url for the ReadMe.md file in Raw version. For example see one: https://raw.githubusercontent.com/Anwar-Faiz/forkrap/master/README.md 2. Now if you want to use server side the using file_gets_content etc of php you can load the url. Or, if you want to use jquery, you can use the Load().

Do, also notice that if you do View Source of the Raw URL page, you just see, plain text. So, you don't need to do much text parsing stuffs as well :) This is a good news.

Next you can use unescape functions or tools like codebeautify to unescape the characters that can alter with the look and feel of your HTML like ' <   " etc etc.

Upvotes: -1

zmckinnon
zmckinnon

Reputation: 15

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.

Upvotes: 2

Mike McLin
Mike McLin

Reputation: 3637

  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.

Upvotes: 2

Related Questions