在提交给github之前，如何testing我的readme.md文件的外观？
我正在为.md格式的github项目写一篇自述文件。 有没有一种方法可以testing我的readme.md文件在提交给github之前的样子？
许多方面：如果你在Mac上，使用牟 。
如果你想在浏览器中testing，你可以尝试StackEdit ，正如@Aaron或者Dillinger指出的那样，因为Notepag似乎已经停止了。 我个人使用迪林格，因为它只是工作，并保存我的浏览器的本地数据库中的所有文件。
这一个已经certificate了很长一段时间的可靠： http : //tmpvar.com/markdown.html
我通常只是直接在GitHub网站上编辑它，然后点击编辑窗口上方的“预览”。
也许这是自从这篇文章发表以来新增的一个新function。
Atom可以很好地工作 – 只需打开Markdown文件，然后按Ctrl + Shift + M切换旁边的Markdown预览面板即可。 它也处理HTML和图像。
这是一个相当古老的问题，但是因为我在search互联网的时候偶然发现了，也许我的答案对其他人有用。 我刚刚find一个非常有用的CLI工具来呈现GitHub风格的降价： 抓地力 。 它使用GitHub的API，因此呈现得相当好。
坦率地说， 抓地力的开发者对这些非常类似的问题有一个更详尽的答案：
- 有没有一个命令行实用程序呈现github风味降价？
- 编辑GitHub的Readme.md的最好方法是什么？
在networking上，使用Dillinger 。 这很棒。
我使用本地托pipe的HTML文件来预览GitHub自述文件。
我看了几个现有的选项，但决定推出我自己的，以满足以下要求：
- 单个文件
- 本地托pipe（Intranet）URL
- 不需要浏览器扩展
- 没有本地托pipe的服务器端处理（例如，没有PHP）
- 轻量级（例如，没有jQuery）
- 高保真度：使用GitHub来渲染Markdown和相同的CSS
我将GitHub存储库的本地副本保存在“github”目录下的兄弟目录中。
每个repo目录都包含一个README.md文件：
.../github/ repo-a/ README.md repo-b/ README.md etc. github目录包含“预览”HTML文件：
.../github/ readme.html
要预览自述文件，我浏览github / readme.html，在查询string中指定回购：
http://localhost/github/readme.html?repo-a
或者，您可以将readme.html复制到与README.md相同的目录中，并省略查询string：
http://localhost/github/repo-a/readme.html
如果readme.html与README.md位于同一目录中，则甚至不需要通过HTTP提供readme.html：只需从文件系统直接打开即可。
HTML文件使用GitHub API将Markdown渲染到README.md文件中。 有一个速度限制 ：在撰写本文时， 每小时60个请求 。
适用于Windows 7的最新版本的Chrome，IE和Firefox。
资源
这是HTML文件（readme.html）：
<!DOCTYPE html> <!-- Preview a GitHub README.md. Either: - Copy this file to a directory that contains repo directories, and then specify a repo name in the query string. For example: http://localhost/github/readme.html?myrepo or - Copy this file to the directory that contains a README.md, and then browse to this file without specifying a query string. For example: http://localhost/github/myrepo/readme.html (or just open this file in your browser directly from your file system, without HTTP) --> <html lang="en"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"/> <meta name="author" content="Graham Hannington"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>GitHub readme preview</title> <link rel="stylesheet" type="text/css" href="http://primercss.io/docs.css"/> <script type="text/javascript"> //<![CDATA[ var HTTP_STATUS_OK = 200; var URL_API_GITHUB_RENDER_MARKDOWN = "https://api.github.com/markdown/raw"; var README_FILE_NAME = "README.md"; var readmeURL; var queryString = location.search.substring(1); if (queryString.length > 0) { readmeURL = queryString + "/" + README_FILE_NAME; } else { readmeURL = README_FILE_NAME; } // Get Markdown, then render it as HTML function getThenRenderMarkdown(markdownURL) { var xhr = new XMLHttpRequest(); xhr.open("GET", markdownURL, true); xhr.responseType = "text"; xhr.onload = function(e) { if (this.status == HTTP_STATUS_OK) { // Response text contains Markdown renderMarkdown(this.responseText); } } xhr.send(); } // Use the GitHub API to render Markdown as HTML function renderMarkdown(markdown) { var xhr = new XMLHttpRequest(); xhr.open("POST", URL_API_GITHUB_RENDER_MARKDOWN, true); xhr.responseType = "html"; xhr.onload = function(e) { if (this.status == HTTP_STATUS_OK) { document.getElementById("readme").innerHTML = this.response; } } xhr.send(markdown); } window.onload = function() { getThenRenderMarkdown(readmeURL); } //]]> </script> </head> <body> <header class="masthead"> <div class="container"> <span class="masthead-logo"><span class="mega-octicon octicon-mark-github"></span>GitHub readme preview</span> </div> </header> <div class="container"> <div id="readme" class="markdown-body"> <p>Rendering markdown, please wait...</p> </div> <footer class="footer">Rendering by <a href="https://developer.github.com/v3/markdown/">GitHub</a>, styling by <a href="http://primercss.io/">Primer</a>.</footer> </div> </body> </html>
开发者笔记
- 通常，我把我的代码包装在一个IIFE中，但是在这种情况下，我没有看到需要，并且认为我会保持简洁
- 我没有打扰支持IE
- 为了简洁，我省略了error handling代码（你相信我？！）
- 我很欢迎JavaScript编程技巧
思路
- 我正在考虑为这个HTML文件创build一个GitHub仓库，并把这个文件放到gh-pages分支中，以便GitHub将它作为一个“普通”的网页。 我会调整文件接受自述文件（或任何其他Markdown文件）的完整URL作为查询string。 我很好奇GitHub托pipe的是否会回避GitHub API请求限制，以及是否与跨域问题发生冲突（使用Ajax请求从服务于HTML页面的域中获取Markdown） 。
原始版本（不推荐）
我保留了这个原始版本的好奇心价值logging。 该版本在当前版本中解决了以下问题：
- 它需要下载一些相关的文件
- 它不支持将其放入与README.md相同的目录中
- 它的HTML更脆弱。 更容易受到GitHub的影响
github目录包含“预览”HTML文件和相关文件：
.../github/ readme-preview.html github.css github2.css octicons.eot octicons.svg octicons.woff
我从GitHub下载了CSS和octicons字体文件：
https://assets-cdn.github.com/assets/github- ... .css https://assets-cdn.github.com/assets/github2- ... .css https://github.com/static/fonts/octicons/octicons.* (eot, woff, svg)
我重命名了CSS文件以省略原始名称中的长hex数字string。
我编辑了github.css来引用octicons字体文件的本地副本。
我检查了一个GitHub页面的HTML，并且复制了围绕自述内容的足够的HTML结构以提供合理的保真度; 例如，约束宽度。
GitHub CSS，octicons字体和自述文件内容的HTML“容器”是移动目标：我将需要定期下载新版本。
我玩弄了从各种GitHub项目使用CSS。 例如：
<link rel="stylesheet" type="text/css" href="http://rawgit.com/sindresorhus/github-markdown-css/gh-pages/github-markdown.css">
但最终决定从GitHub本身使用CSS。
资源
这里是HTML文件（readme-preview.html）：
<!DOCTYPE html> <!-- Preview a GitHub README.md. Copy this file to a directory that contains repo directories. Specify a repo name in the query string. For example: http://localhost/github/readme-preview.html?myrepo --> <html> <head> <title>Preview GitHub readme</title> <meta http-equiv="X-UA-Compatible" content="IE=Edge"/> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <!-- Downloaded copies of the CSS files served by GitHub. In github.css, the @font-face for font-family:'octicons' has been edited to refer to local copies of the font files --> <link rel="stylesheet" type="text/css" href="github.css"/> <link rel="stylesheet" type="text/css" href="github2.css"/> <style> body { margin-top: 1em; } </style> <script type="text/javascript"> //<![CDATA[ var HTTP_STATUS_OK = 200; var URL_API_GITHUB_RENDER_MARKDOWN = "https://api.github.com/markdown/raw"; var README_FILE_NAME = "README.md"; var repo = location.search.substring(1); // Get Markdown, then render it as HTML function getThenRenderMarkdown() { var xhr = new XMLHttpRequest(); xhr.open("GET", repo + "/" + README_FILE_NAME, true); xhr.responseType = "text"; xhr.onload = function(e) { if (this.status == HTTP_STATUS_OK) { // Response text contains Markdown renderMarkdown(this.responseText); } } xhr.send(); } // Use the GitHub API to render Markdown as HTML function renderMarkdown(markdown) { var xhr = new XMLHttpRequest(); xhr.open("POST", URL_API_GITHUB_RENDER_MARKDOWN, true); xhr.responseType = "html"; xhr.onload = function(e) { if (this.status == HTTP_STATUS_OK) { document.getElementById("readme-content").innerHTML = this.response; } } xhr.send(markdown); } window.onload = getThenRenderMarkdown; //]]> </script> </head> <body> <!-- The following HTML structure was copied from live GitHub page on 2015-12-01, except for the "readme-content" id of the article element, which was coined for this preview page.--> <div class="main-content" role="main"> <div class="container repo-container new-discussion-timeline experiment-repo-nav"> <div class="repository-content"> <div id="readme" class="boxed-group flush clearfix announce instapaper_body md"> <h3><span class="octicon octicon-book"></span>README.md</h3> <article class="markdown-body entry-content" itemprop="mainContentOfPage" id="readme-content"><p>Rendering markdown...</p></article> </div> </div> </div> </div> </body> </html>
只要searchnetworking，就可以得到许多inheritance人： https ： //stackedit.io/
Visual Studio代码可以select编辑和预览md文件的更改。 更多细节在这里
如果您正在使用Pycharm（或其他Jetbrains IDE，如Intellij，RubyMine，PHPStorm等），那么在您的IDE中有多个针对Markdown支持的免费插件可以在编辑时进行实时预览。 Markdown Navigator插件相当不错。 如果您在IDE中打开.md文件，则最新版本将提供安装支持插件并向您显示列表。
SublimeText 2/3
安装包： Markdown Preview
选项：
- 在浏览器中预览。
- 导出到html。
- 复制到剪贴板。
