原始版本（不建议使用）

Question

我正在以.md格式为我的github项目编写自述文件。有没有办法在提交到github之前测试我的readme.md文件会是什么样子？

Answer 1

多种方式：如果您使用的是Mac，请使用Mou。

如果您想在浏览器中进行测试，可以尝试StackEdit，正如@Aaron或Dillinger所指出的那样，因为Notepag现在似乎已经失败了。我个人使用Dillinger因为它只是工作并将我的所有文档保存在浏览器的本地数据库中。

Answer 2

Atom可以很好地开箱即用 - 只需打开Markdown文件，然后点击 Ctrl + Shift + M 即可切换旁边的Markdown预览面板。它还处理HTML和图像。

Answer 3

这个已被证明可靠一段时间了：http://tmpvar.com/markdown.html

Answer 4

我通常只是直接在GitHub网站上编辑它，然后点击＆＃34;预览＆＃34;就在编辑窗口的上方。

也许这是自该帖子发布以来添加的新功能。

Answer 5

这是一个非常古老的问题，但是因为我在搜索互联网时偶然发现它可能我的答案对其他人有用。我刚刚发现了一个非常有用的CLI工具，用于渲染GitHub风格的降价：grip。它使用GitHub的API，因此呈现得非常好。

坦率地说，grip的开发人员对这些非常相似的问题有更详尽的答案：

Answer 6

Visual Studio代码可以选择编辑和预览md文件更改。由于VS Code与平台无关，因此适用于Windows，Mac和Linux。

要在视图之间切换，请在编辑器中按 Ctrl + Shift + V 。您可以使用正在编辑的文件并排查看预览（Ctrl + K V），并在编辑时查看实时反映的更改。

也...

问：VS Code是否支持GitHub Flavored Markdown？

答：不，VS Code使用markdown-it库来定位CommonMark Markdown规范。 GitHub正朝着CommonMark规范发展。

More details here

Answer 7

在网络中，使用Dillinger。真棒。

Answer 8

你可能想看一下这个：

https://github.com/kristjanjansen/md2html

Answer 9

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

我查看了几个现有的选项，但决定自己动手以满足以下要求：

单个文件
本地托管（内部网）网址
无需浏览器扩展程序
没有本地托管的服务器端处理（例如，没有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，在查询字符串中指定repo：

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在README.md文件中呈现Markdown。有一个rate limit：在撰写本文时，每小时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请求从与提供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>

Answer 10

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

Answer 11

MarkdownPreview，先前评论中提到的 Sublime Text 插件已不再与ST2兼容，而仅支持 Sublime Text 3 （从春季开始） 2018）。

这有什么好用的：它支持GFM GitHub Flavored Markdown，可以做的比常规Markdown还要多。如果您想确切地知道自己的.md在GH上的外观，则这是相关的。 _{^{（包含此信息是因为OP本身未添加GFM标签，其他正在寻找解决方案的人也可能不知道它。）}}

如果您在线，则可以将其与GitHub API一起使用，尽管为此您应该获得personal access token，因为未经身份验证的API调用受到限制。插件的文档中有关于Parsing GFM的更多信息。

Answer 12

只是在网上搜索就会产生许多人： https://stackedit.io/

Answer 13

SublimeText 2/3

安装包：Markdown Preview

选项：

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

Answer 14

如果您正在使用Pycharm（或其他Jetbrains IDE，如Intellij，RubyMine，PHPStorm等），您可以在IDE中使用多个免费插件来支持Markdown，以便在编辑时进行实时预览。 Markdown Navigator插件非常好用。如果在IDE中打开.md文件，则最新版本将提供安装支持插件并显示列表。

Answer 15

我知道这个问题很旧，也许有人正在谷歌搜索并到达这里。无论如何，这就是我如何看待这个问题。

即使在github风格中，您也可以使用原子文本编辑器并切换markdown预览。

按

ctrl+shift+m

该窗口将弹出或使用Packages-> Markdown Preview。

希望这对某人有帮助。

Answer 16

使用Jupyter Lab。

要安装Jupyter Lab，请在您的环境中键入以下内容：

pip install jupyterlab

安装完成后，浏览到降价文件的位置，右键单击该文件，选择“打开方式”，然后单击“降价预览”。

Answer 17

对于Visual Studio用户（不是VS CODE）。

安装 Markdown Editor 扩展程序

这样，当您打开README.md时，您将在右侧进行实时预览。

Answer 18

对于Visual Studio代码，我使用

Markdown Preview增强扩展。

Answer 19

ReText是很好的轻量级Markdown查看器/编辑器。

^{ReText 带有实时预览（来源：ReText；单击图像可获得较大的变体）}

我感谢Izzy回答了https://softwarerecs.stackexchange.com/questions/17714/simple-markdown-viewer-for-ubuntu（其他答案提到了其他可能性）

Answer 20

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

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

Answer 21

MarkdownViewerPlusPlus 是“ [...] Notepad ++插件，用于查看即时呈现的Markdown文件功能

具有当前所选文件/选项卡的呈现HTML的可停靠面板（切换）
符合CommonMark（0.28）
同步滚动
自定义CSS集成
HTML和PDF导出
Notepad ++ Unicode插件 [...]“

Answer 22

您可以使用static site editor：与GitLab 13.0 (May 2020)一起使用，它带有一个所见即所得的面板。

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

Markdown是一种用于编写Web内容的强大而有效的语法，但是即使Markdown内容的资深作者也很难记住一些不常用的格式设置选项，或者甚至从头开始编写中等复杂的表。
通过“所见即所得”（WYSIWYG）编辑器，可以使用富文本格式更好地完成一些工作。

GitLab 13.0为静态站点编辑器带来了所见即所得的Markdown创作经验，其中包括用于常见格式设置选项的格式设置选项，例如标题，粗体，斜体，链接，列表，块引用和代码块。 >

WYSIWYG编辑器还使您可以以与编辑电子表格相同的方式直观地编辑表格的行，列和单元格，从而消除了Markdown中繁琐的表格编辑任务。对于那些更舒适地使用原始Markdown书写的用户，甚至还提供了一个选项卡，用于在所见即所得和纯文本编辑模式之间进行切换。

请参见documentation和issue。

同样，您只会用它来编写README：看起来不错后，就可以将其报告回原始项目。
但要点是：您不需要任何第三方降价预览插件。

Answer 23

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

Answer 24

一种方法是使用 Pandoc（非常有用）。

将 Markdown 纯文本复制到剪贴板

运行：

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

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

你说你是using Linux。你只需要安装 pandoc 包。

Answer 25

对于那些希望在iPad上开发的人，我喜欢Textastic。从云端下载文档后，您可以在没有互联网连接的情况下编辑和预览README.md文件。

在提交github之前，如何测试readme.md文件的外观？

25 个答案:

来源

开发人员备注

观

原始版本（不建议使用）

来源

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