如何在提交到github之前测试我的readme.md文件的外观？
Answers:
多种方式：如果您使用的是Mac，请使用Mou。
如果要在浏览器中进行测试，则可以尝试StackEdit，如@Aaron或Dillinger所指出的那样，因为Notepag现在似乎已经掉线了。我个人使用Dillinger，因为它可以正常工作并将所有文档保存在浏览器的本地数据库中。
Atom开箱即用，效果很好-只需打开Markdown文件，然后按Ctrl + Shift + M即可切换旁边的Markdown预览面板。它还处理HTML和图像。
atom .并右键单击自述文件即可Markdown Preview
<details>标签支持可折叠部分。Atom确实可以，并且看起来比其余的要好。
事实证明，这已经可靠了一段时间：http：//tmpvar.com/markdown.html
通常，我通常直接在GitHub网站上进行编辑，然后单击编辑窗口上方的“预览”。
也许这是发布此帖子以来添加的新功能。
xxx.md并在其中粘贴代码。文件扩展名是.md这样，您可以预览更改。您将完成更新，然后复制文件内容并将其粘贴到原始readme.md文件上。
<div align='center'><img ...></div>居中居中，则在预览中居中显示该图像，则该图像将左对齐。您必须保存它才能准确地查看它，这使预览不可靠。
Visual Studio Code可以选择编辑和预览md文件更改。由于VS Code与平台无关，因此适用于Windows，Mac和Linux。
要在视图之间切换，请在编辑器中按Ctrl + Shift + V。您可以与正在编辑的文件并排查看（Ctrl + KV），并在编辑时实时看到更改。
也...
问：VS Code是否支持GitHub Flavored Markdown？
答：否，VS Code使用markdown-it库将CommonMark Markdown规范作为目标。GitHub正朝着CommonMark规范迈进。
我使用本地托管的HTML文件预览GitHub自述文件。
我研究了几个现有的选项，但决定自行推出以满足以下要求：
- 单文件
- 本地托管（内部网）URL
- 无需浏览器扩展
- 没有本地托管的服务器端处理（例如，没有PHP）
- 轻量级（例如，没有jQuery）
- 高保真度：使用GitHub渲染Markdown，以及相同的CSS
我将GitHub存储库的本地副本保存在“ github”目录下的同级目录中。
每个回购目录包含一个README.md文件：
.../github/
repo-a/
README.md
repo-b/
README.md
etc.
github目录包含“预览” HTML文件：
.../github/
readme.html
要预览自述文件，请浏览github / readme.html，在查询字符串中指定存储库：
http://localhost/github/readme.html?repo-a
或者，您可以将readme.html复制到与README.md相同的目录中，并省略查询字符串：
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
- 为简洁起见，我省略了错误处理代码（您相信我吗？！）
- 我欢迎JavaScript编程技巧
主意
- 我正在考虑为此HTML文件创建GitHub存储库，并将该文件放在gh-pages分支中，以便GitHub将其用作“常规”网页。我将调整文件以接受完整的URL-自述文件（或任何其他Markdown文件）作为查询字符串。我很好奇，看看由GitHub托管是否会避开GitHub API请求限制，以及是否遇到跨域问题（使用Ajax请求从不同于服务HTML页面的域中获取Markdown） 。
原始版本（已弃用）
我出于好奇的价值保留了原始版本的记录。当前版本解决了以下问题：
- 需要下载一些相关文件
- 它不支持与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文件，以省略原始名称中的十六进制数字长字符串。
我编辑了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>对于Github或Bitbucket主题，可以使用在线编辑器mattstow，网址：http://writeme.mattstow.com
仅仅在网络上搜索就可以找到许多继承人：https : //stackedit.io/
MarkdownPreview，先前评论中提到的 Sublime Text插件不再与ST2兼容，仅支持 Sublime Text 3（自2018年春季起）。
这样做的好处是：它支持GFM，GitHub Flavored Markdown，可以做的比常规Markdown还要多。如果您想.md确切了解GH的外观，则这具有相关性。（之所以包含这些信息，是因为OP本身并未添加GFM标签，而其他寻求解决方案的人也可能不会意识到这一点。）
如果在线，则可以将其与GitHub API一起使用，尽管为此您应该获得个人访问令牌，因为未经身份验证的API调用受到限制。插件文档中提供了有关解析GFM的更多信息。
使用Jupyter Lab。
要安装Jupyter Lab，请在您的环境中键入以下内容：
pip install jupyterlab
安装后，浏览至Markdown文件的位置，右键单击该文件，选择“打开方式”，然后单击“ Markdown预览”。
对于Visual Studio Code，我使用
Markdown Preview增强扩展。
ReText是一个很好的轻量级Markdown查看器/编辑器。
带实时预览的ReText（来源：ReText；单击图像可获得较大的变体）
我感谢Izzy回答了/softwarerecs/17714/simple-markdown-viewer-for-ubuntu（其他答案提到了其他可能性）
我正在使用markdownlivepreview：https :
//markdownlivepreview.com/
这是非常容易，简单和快速的。
MarkdownViewerPlusPlus 是“ [...] Notepad ++插件”，用于查看动态呈现的Markdown文件
- 具有当前所选文件/选项卡的呈现HTML的可停靠面板（切换）
- 符合CommonMark（0.28）
- 同步滚动
- 自定义CSS集成
- HTML和PDF导出
- 记事本++ Unicode插件[...]“
您可以使用静态站点编辑器：在GitLab 13.0（2020年5月）中，它带有一个所见即所得的面板。
静态网站编辑器的所见即所得
Markdown是用于编写Web内容的强大而有效的语法，但是即使Markdown内容的经验丰富的作者也很难记住一些不常用的格式设置选项，或者甚至从头开始编写中等复杂的表。
富文本（“所见即所得”（WYSIWYG）编辑器）可以更好地完成某些工作。GitLab 13.0为静态站点编辑器带来了所见即所得的Markdown创作经验，其中包含用于常见格式设置选项的格式设置选项，例如标题，粗体，斜体，链接，列表，块引用和代码块。
WYSIWYG编辑器还使您可以以与编辑电子表格相同的方式直观地编辑表格的行，列和单元格，从而消除了Markdown中繁琐的表格编辑工作。对于那些更舒适地使用原始Markdown进行书写的用户，甚至还有一个选项卡可用于在所见即所得和纯文本编辑模式之间进行切换。
同样，您将只使用它来编写您的README：一旦看起来不错，就可以将其报告回原始项目。
但是关键是：您不需要任何第三方降价预览插件。