小开

最佳答案

很多方法:如果你在Mac上，使用谅解备忘录。

如果你想在浏览器中测试，你可以尝试StackEdit，正如@Aaron或格林杰指出的那样，因为Notepag现在似乎已经关闭了。就我个人而言，我使用Dillinger，因为它可以将我所有的文档保存在浏览器的本地数据库中。

小开

你可能想看看这个:

https://github.com/kristjanjansen/md2html

小开

http://tmpvar.com/markdown.html已经被证明是可靠的

小开

我通常只是直接在GitHub网站上编辑它，然后点击编辑窗口上方的“预览”。

也许这是自这篇文章以来添加的一个新功能。

小开

在web中，使用格林杰。这是可怕的。

小开

只要在网上搜索一下，就会得到很多这样的答案: https://stackedit.io/

小开

这是一个相当老的问题，但由于我是在网上搜索时偶然发现的，也许我的答案对其他人有用。我刚刚发现了一个非常有用的CLI工具，用于渲染GitHub风味markdown: 控制。它使用GitHub的API，因此渲染得很好

坦率地说，控制的开发人员对这些非常相似的问题有一个更详细的答案:

是否有一个命令行实用程序渲染github风味markdown?< / >

编辑GitHub's Readme.md的最好方法是什么?< / >

小开

我使用一个本地托管的HTML文件来预览GitHub自述。

我看了几个现有的选择，但决定自己做一个，以满足以下要求:

单独的文件
本地托管(内部网)URL
不需要浏览器扩展
没有本地托管的服务器端处理(例如，没有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

为了预览一个自述me，我浏览github/readme.html，在查询字符串中指定repo:

http://localhost/github/readme.html?repo-a

或者，您可以将README. html复制到与README相同的目录中。Md，并省略查询字符串:

http://localhost/github/repo-a/readme.html

如果README. html和README. html在同一个目录下。md，你甚至不需要通过HTTP服务readme.html:你可以直接从你的文件系统打开它。

HTML文件使用GitHub API在README中呈现Markdown。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 - README(或任何其他Markdown文件)-作为查询字符串。我很好奇是否由GitHub托管会避开GitHub API请求限制，以及我是否会遇到跨域问题(使用Ajax请求从不同的域获得Markdown，而不是服务HTML页面的域)。

原始版本(已弃用)

我保存了这张原始版本的唱片，以备好奇之用。此版本存在以下问题，当前版本已解决:

需要下载一些相关文件
它不支持被放入与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结构，以提供合理的保真度;例如，受限宽度。

用于自readme内容的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>

小开

如果你正在使用Pycharm(或其他Jetbrains IDE，如Intellij, RubyMine, PHPStorm等)，在你的IDE中有多个免费的Markdown支持插件，允许在编辑时实时预览。Markdown Navigator插件相当不错。如果您在IDE中打开一个.md文件，最新版本将提供安装支持插件并显示列表。

小开

< >强原子< / >强工作得很好-只需打开Markdown文件并点击Ctrl + Shift + M来切换旁边的Markdown预览面板。它还处理HTML和图像。

小开

Visual Studio代码具有编辑和预览md文件更改的选项。因为VS Code是独立于平台的，所以这适用于Windows、Mac和Linux。

要在视图之间切换，在编辑器中按Ctrl + Shift + V。你可以与你正在编辑的文件并排查看预览(Ctrl + K V)，并在你编辑时看到实时反映的变化。

也……

问:VS Code是否支持GitHub调味Markdown?

答:不，VS Code使用Markdown -it库来实现CommonMark Markdown规范。GitHub正在向CommonMark规范迈进。

预览按钮是:

更多细节在这里

小开

SublimeText 2/3

安装包:Markdown Preview

选项:

在浏览器中预览。
导出到html。
复制到剪贴板。

小开

对于Github或Bitbucket主题，可以使用在线编辑器mattstow, url: http://writeme.mattstow.com

小开

对于那些希望在ipad上开发游戏的人来说，我喜欢Textastic。您可以编辑和预览README。Md文件，没有互联网连接，一旦你从云下载文档。

小开

使用Jupyter实验室。

要安装Jupyter Lab，请在您的环境中输入以下命令:

pip install jupyterlab

安装后，浏览到您的markdown文件的位置，右键单击文件，选择“打开”，然后单击“markdown预览”。

小开

针对Visual Studio用户(不是VS CODE)。

安装Markdown Editor扩展

这样，当你打开一个README。医生，你可以在右边看到现场预览。

小开

对于Visual Studio Code，我使用

Markdown预览增强扩展。

小开

在前面的评论中提到的崇高的文本插件< >强减价预览< / >强不再与ST2兼容，但只支持崇高的文本3(自2018年春季以来)。

它的优点是:它支持GFM， GitHub调味Markdown，它可以做的比常规Markdown多一点。如果你想知道你的__abc0在GH上会是什么样子，这是相关的。_{^{(包括这一点信息，因为OP自己没有添加GFM标签，其他寻找解决方案的人可能也不知道它。}}

如果你在线，你可以将它与GitHub API一起使用，尽管你应该为此目的获得个人访问令牌，因为没有身份验证的API调用是有限的。在插件的文档中有更多关于解析GFM的信息。

小开

我正在使用markdownlivepreview:
https://markdownlivepreview.com/

这是非常容易，简单和快速。

小开

MarkdownViewerPlusPlus 是“[…]] notepad++插件查看Markdown文件渲染在飞行功能

可停靠的面板(切换)，带有当前选定文件/选项卡的渲染HTML
CommonMark兼容(0.28)
同步滚动
自定义CSS集成
HTML和PDF导出
notepad++ Unicode插件 […]”李< / >

小开

你可以使用静态站点编辑器:对于GitLab 13.0(2020年5月)，它带有一个所见即所得面板。

所见即所得的静态网站编辑器
Markdown是一种强大而高效的web内容创作语法，但即使是Markdown内容的资深作者也很难记住一些不太常用的格式选项，或者从头开始编写中等复杂的表格。
“所见即所得”(WYSIWYG)编辑器可以更好地完成一些工作
GitLab 13.0为静态站点编辑器带来了WYSIWYG Markdown创作体验，为常见的格式化选项提供了格式化选项，如标题、粗体、斜体、链接、列表、块引号和代码块。

所见即所得编辑器还消除了在Markdown中编辑表格的繁重任务，允许您以编辑电子表格的相同方式可视化地编辑表的行、列和单元格。对于那些更喜欢用原始Markdown写作的人来说，甚至还有一个选项卡可以在所见即所得和纯文本编辑模式之间切换。

参见文档和问题。

同样，你只能使用它来编写README:一旦它看起来很好，你就可以把它报告给你原来的项目。
但关键是:你不需要任何第三方markdown预览插件

和GitLab 14.2(2021年8月)

预览Markdown现场编辑
Markdown是一种快速直观的语法，用于编写丰富的web内容。直到它不是。
幸运的是，很容易预览Markdown的渲染输出，以确保预览选项卡标记的准确性
不幸的是，在原始源代码和预览之间移动所需的上下文切换可能会很乏味，并且会破坏您的流程。
现在，在Web IDE和单文件编辑器中，Markdown文件都有一个新的实时预览选项。右键单击编辑器并选择预览减价或使用Command/Control + Shift + P切换Markdown内容的分屏实时预览。
预览会在您键入时刷新，因此您可以确信您的标记是有效的，并将按您的意图呈现

参见文档和史诗。

参见GitLab 14.6(2021年12月)

无缝切换维基编辑器

无缝切换维基编辑器
使用新的丰富Markdown编辑器编辑wiki页面，使每个人都更容易贡献，无论他们多么了解Markdown语法。
在某些情况下，您可能更喜欢编写原始Markdown，但对于更复杂或乏味的格式化任务，如创建表格，则使用所见即所得接口
以前版本的GitLab要求您在富Markdown编辑器和Markdown源代码之间切换之前保存更改，这为您的编辑增加了更多步骤和摩擦。

在GitLab 14.6中，您现在可以在两种编辑体验之间无缝切换，而无需提交更改，在任何给定时刻选择适合您需要的编辑器。

参见文档和问题。

另见GitLab 15.6(2022年11月)

在Web编辑器中为Markdown预览的默认分屏视图

在编辑时并排预览Markdown文件的能力是GitLab 14.2中的介绍了。

在这个版本中，我们将分屏视图作为在Web编辑器中预览Markdown的默认体验。
在预览选项卡中，你现在可以看到实时Markdown预览，随着你的内容的输入而更新。
这样，你可以确信你的标记是有效的，并按照你的意图呈现，而不必在写和预览选项卡之间切换
参见文档和问题。

小开

我知道这个问题很老了，也许有人在谷歌上搜索了如何到达这里。这就是我对这个问题的看法

你可以使用原子文本编辑器和切换markdown预览甚至在github风格。

新闻

ctrl+shift+m

窗口将弹出或使用Packages—Markdown Preview.

希望这对大家有所帮助。

小开

我发现markdownlivepreview.com非常接近于香草GitLab markdown。其他查看器对命令的解释与GitLab略有不同

小开

一种方法是使用Pandoc(非常有用)。

复制你的Markdown投诉文本到剪贴板

运行:

xsel -b | pandoc -s -f markdown -t html | xclip -selection clipboard -t text/html | xsel -b

粘贴生成的格式化文本(例如在电子邮件或LibreOffice上)。

你说你是使用Linux。你只需要安装pandoc, xsel和xclip包。

小开

我只需要创建一个“feature”;分支并将其推到github，在那里我做了更改，这变得可见，他们将如何在github中看起来。

然后，当我满意的时候，我就把base调回main，或者对main执行一个pull请求，不管你碰巧在使用哪个进程。

使用git时，很少需要在本地进行测试，除非您的存储库位于公司防火墙后面，或者需要离线工作。

在这种情况下，Atom和VScode都有不错的Markdown渲染器，不足以在github上显示你的更改，但足以看到你的更改是否朝着正确的方向发展。

小开

自2012年(当这个问题被创建时)GitHub本身可以:

在常规存储库中创建并显示Markdown文档的预览(它总是这样，2011年8月起)
或者，如果你不想直接影响你的存储库，用< >强依据< / >强 (自2020年12月起)
做同样的事情即使不提交要点，自2021年11月起，你也可以预览你正在编辑(但尚未提交)的在Gist中标记文档

一旦要旨的预览看起来不错，你就可以从要旨复制标记到你的本地README.md，添加，提交和推送。

小开

VS代码

麦克:Command + Shift + V

Windows: Ctrl + Shift + V

详细说明

在VS Code中打开.md文件。选定文件后，使用上面的键盘快捷键。

我如何测试我的自述。Md文件在提交到github之前会是什么样子?

源

开发人员指出

的想法

原始版本(已弃用)

源

所见即所得的静态网站编辑器

预览Markdown现场编辑

无缝切换维基编辑器

在Web编辑器中为Markdown预览的默认分屏视图

VS代码

详细说明