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

我正在为我的github项目写一个自述文件。md格式。有什么方法可以测试我的自述。Md文件在提交到github之前会是什么样子?

有很多方法:如果你用的是Mac，使用Mou。

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

2012-02-17 15:49:55

你可能想看看这个:

https://github.com/kristjanjansen/md2html

2012-07-03 10:38:46

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

2012-11-11 01:21:09

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

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

2014-09-18 21:09:09

在网络中，使用Dillinger。这是可怕的。

2015-01-12 23:56:35

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

2015-10-09 18:09:09

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

坦率地说，《grip》的开发者对这些类似的问题有更详细的回答:

是否有一个命令行实用程序渲染github风味markdown? 编辑GitHub的Readme.md的最好方法是什么?

2015-10-23 14:39:02

我使用一个本地托管的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编程技巧

的想法

I'm considering creating a GitHub repository for this HTML file, and putting the file in the gh-pages branch, so that GitHub serves it as a "normal" web page. I'd tweak the file to accept a complete URL - of the README (or any other Markdown file) - as the query string. I'm curious to see whether being hosted by GitHub would sidestep the GitHub API request limit, and whether I run afoul of cross-domain issues (using an Ajax request to get the Markdown from a different domain than the domain serving the HTML page).

原始版本(已弃用)

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

需要下载一些相关文件它不支持被放入与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>

2015-12-01 05:41:58

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

2016-11-09 18:07:43

Atom工作得很好-只需打开Markdown文件，并按Ctrl+Shift+M切换Markdown预览面板旁边。它还处理HTML和图像。

2016-11-19 18:42:56

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

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

也……

问:VS Code是否支持GitHub调味Markdown? 答:不，VS Code使用Markdown -it库来实现CommonMark Markdown规范。GitHub正在向CommonMark规范迈进。

预览按钮如下:

详情请点击这里

2017-04-11 04:32:38

崇高文本 2/3

安装包:Markdown预览

选项:

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

2017-11-15 09:23:48

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

2017-11-21 09:11:04

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

2017-12-05 18:00:28

使用Jupyter Lab。

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

pip install jupyterlab

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

2018-05-13 12:42:25

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

安装Markdown编辑器扩展

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

2018-05-18 19:09:28

对于Visual Studio Code，我使用

Markdown预览增强扩展。

2018-07-07 11:50:16

Markdown预览，在之前的评论中提到的Sublime Text插件不再与ST2兼容，但只支持Sublime Text 3(自2018年春季以来)。

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

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

2018-08-04 12:32:18

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

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

2019-01-25 21:05:35

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

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

2020-04-29 04:54:58

你可以使用静态网站编辑器:在GitLab 13.0(2020年5月)中，它附带了一个所见即所得面板。

WYSIWYG for the Static Site Editor Markdown is a powerful and efficient syntax for authoring web content, but even seasoned authors of Markdown content can struggle to remember some of the less-frequently used formatting options or write even moderately-complex tables from scratch. There are some jobs better accomplished with a rich text, “What You See Is What You Get” (WYSIWYG) editor. GitLab 13.0 brings a WYSIWYG Markdown authoring experience to the Static Site Editor with formatting options for common formatting options like headers, bold, italics, links, lists, blockquotes, and code blocks. The WYSIWYG editor also removes the onerous task of editing tables in Markdown by letting you visually edit table rows, columns and cells in the same way you would edit a spreadsheet. For those more comfortable writing in raw Markdown, there’s even a tab for switching between WYSIWYG and plain text editing modes.

请参阅文档和版本。

同样，您只能使用它来编写README:一旦它看起来很好，您就可以将它报告给原始项目。但重点是:你不需要任何第三方降价预览插件。

GitLab 14.2(2021年8月)

Preview Markdown live while editing Markdown is a fast and intuitive syntax for writing rich web content. Until it isn’t. Luckily, it’s easy to preview the rendered output of Markdown to ensure the accuracy of your markup from the Preview tab. Unfortunately, the context switch required to move between the raw source code and the preview can be tedious and disruptive to your flow. Now, in both the Web IDE and single file editor, Markdown files have a new live preview option available. Right-click the editor and select Preview Markdown or use Command/Control + Shift + P to toggle a split-screen live preview of your Markdown content. The preview refreshes as you type, so you can be confident that your markup is valid and will render as you intended. See Documentation and Epic.

参见GitLab 14.6(2021年12月)

Toggle wiki editors seamlessly Toggle wiki editors seamlessly Editing wiki pages with the new rich Markdown editor makes it easier for everyone to contribute regardless of how well they know Markdown syntax. You may also prefer to write raw Markdown in some situations, but use the WYSIWYG interface for more complex or tedious formatting tasks, like creating tables. Previous versions of GitLab required you to save changes before switching between the rich Markdown editor and the Markdown source, adding more steps and friction to your edits. In GitLab 14.6 you can now seamlessly switch between the two editing experiences without committing your changes, choosing the editor that suits your needs at any given moment. See Documentation and Issue.

参见GitLab 15.6(2022年11月)

Default split view for Markdown preview in the Web Editor The ability to preview Markdown files side by side while editing was introduced in GitLab 14.2. With this release, we’ve made the split view the default experience for previewing Markdown in the Web Editor. In the Preview tab, you can now see a live Markdown preview that updates as you type alongside your content. This way, you can be confident that your markup is valid and renders as you intended without having to switch between the Write and Preview tabs. See Documentation and Issue.

2020-05-22 22:43:48

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

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

新闻