從 GitHub README.md 文件 Markdown 到 HTML

Question

我的目標是，

1) 從我的 GitHub 存儲庫的README.md文件中讀取 Markdown 源代碼。
2) 將 Markdown 轉換為 HTML 代碼。
3) 將輸出 HTML 應用到<div> 。

僅使用客戶端技術。

我知道如何使用 jQuery 將 Markdown 代碼轉換為 HTML，但不知道如何從 GitHub 存儲庫的 README.md 文件中動態讀取 MD 源代碼。

Answer 1

1. 從 GitHub 存儲庫中獲取 README.md 文件的原始文件 url。
2. 將 url 格式化為以下格式http://markdown.io/<url_readme_file> 。 假設我的 readme.md 文件的 url 是http://raw.github.com/pankajparashar/nerdy-css/master/README.md 。 因此，新的 url 變為http://markdown.io/http://raw.github.com/pankajparashar/nerdy-css/master/README.md
3. 現在使用這個新的 url 使用 jQuery 的 load 方法，並從頁面的#md-content id 中提取內容。

此處提供上述步驟的完整演示 - 已刪除非工作鏈接

Answer 2

你應該看看：

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

它使用 GitHub API 通過以下調用檢索自述文件的內容：

獲取 /repos/:owner/:repo/readme

然后它轉換 base64 加密的內容。

然后它使用標記將降價內容轉換為 html。

Answer 3

1. 轉到您的 GitHub 項目頁面
2. 單擊您的README.md文件
3. 現在點擊原始按鈕

原始文件是您要加載的實際 URL。

創建一個名為load.php的 PHP（或您使用的任何服務器端語言）文件，專門用於加載遠程文件（如您的 RAW 文件）。 PHP 腳本將接受$_GET['url']變量。 將變量傳遞給file_get_contents() ，並輸出結果。 請注意，下面的代碼是一個非常簡單的例子。

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

現在，只需使用 jQuery 中的load函數從 PHP 文件中引入數據內容。 您的 URL 的格式可能與此類似...

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

最后，使用您已經描述的任何方式轉換為 Markdown。

• PHP file_get_contents() : http://php.net/manual/en/function.file-get-contents.php
• jQuery load() ： http : //api.jquery.com/load/
• 有關繞過同源策略的更多信息： http : //www.mikazo.com/2010/09/how-to-getting-around-ajax-same-origin.html

Answer 4

值得注意的是，HTML 在 ReadMe.md 文件中確實有效。 有了這個清晰的理解，我想很多這樣的問題都會自動得到回答，比如 - 如何在自述文件中制作粗體，或者如何插入圖像等。 另請注意，這在很大程度上取決於您使用的應用程序/文本編輯器和在操作系統上也很多。 最近我在 Github 的 Readme.md 文件中插入空行字符時遇到了麻煩。

我個人更喜歡 < br /> 標簽，我有一篇完整的文章描述了同樣的內容： http : //www.w3lc.com/2017/05/new-line-in-readme-file-github-fixing.html

我已經在帖子中解釋了 Github 存儲庫中的 git commit 中的更改。 這種理解對於處理這個問題是非常需要的，並且還需要找到為什么你可能需要這樣做的許多其他用途！

此外，要直接回答您的問題，您需要兩個步驟： 1. 在 Raw 版本中找到 ReadMe.md 文件的 URL。 例如看一個： https : //raw.githubusercontent.com/Anwar-Faiz/forkrap/master/README.md 2. 現在如果你想使用服務器端的使用 file_gets_content 等 php 你可以加載 url。 或者，如果你想使用 jquery，你可以使用 Load()。

請注意，如果您查看原始 URL 頁面的源代碼，您只會看到純文本。 因此，您也不需要做太多的文本解析工作 :) 這是個好消息。

接下來，您可以使用 unescape 函數或 codebeautify 之類的工具來取消轉義可以隨 HTML 的外觀和感覺而改變的字符，例如 ' < " 等。