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

19 回答

0

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

回复于 2024-04-25T16:40:02+08:00
1

许多方法：如果您使用的是Mac，请使用Mou .

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

回复于 2024-04-25T16:40:02+08:00
22

Atom开箱即用 - 只需打开Markdown文件并点击 Ctrl+Shift+M 即可切换旁边的Markdown预览面板 . 它还处理HTML和图像 .

回复于 2024-04-25T16:40:02+08:00
4

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

回复于 2024-04-25T16:40:02+08:00
2

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

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

回复于 2024-04-25T16:40:02+08:00
1
这是一个非常古老的问题，但是因为我在搜索互联网时偶然发现它可能我的答案对其他人有用 . 我刚刚发现了一个非常有用的CLI工具，用于渲染GitHub风格的降价：grip . 它使用GitHub的API，因此呈现得非常好 .

坦率地说，grip的开发人员对这些非常相似的问题有更详尽的答案：
- Is there a command line utility for rendering github flavored markdown?
- What's the best way to edit GitHub's Readme.md?
回复于 2024-04-25T16:40:02+08:00
1

Visual Studio Code 可以选择编辑和预览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

回复于 2024-04-25T16:40:02+08:00
-1

你可能想看看这个：

https://github.com/kristjanjansen/md2html

回复于 2024-04-25T16:40:02+08:00
42

在Web中，使用Dillinger . 这很棒 .

回复于 2024-04-25T16:40:02+08:00

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

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

单个文件
本地托管（Intranet）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

要预览自述文件，我浏览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 requests per hour .

适用于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中，但在这种情况下，我没有't see the need, and thought I' d保持简洁
我没有打扰支持后级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 1339963 web page. I' d调整文件以接受完整的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>

回复于 2024-04-25T16:40:02+08:00

4

只是搜索网络给了很多人一个：https://stackedit.io/

回复于 2024-04-25T16:40:02+08:00
0

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

回复于 2024-04-25T16:40:02+08:00
22
SublimeText 2/3

安装包： Markdown Preview

选项：
- 在浏览器中预览 .
- 导出为html .
- 复制到剪贴板 .
回复于 2024-04-25T16:40:02+08:00
105

MarkdownPreview，早期评论中提到的 Sublime Text 插件不再与ST2兼容，但仅支持 Sublime Text 3 （自2018年 Spring 季以来） .

什么是巧妙的：它支持GFM，GitHub Flavored Markdown，它可以比常规Markdown更多 . 如果你想知道你的 .md 在GH上会是什么样子，这是相关的 . （包括这一点信息，因为OP没有自己添加GFM标签，而其他寻找解决方案的人可能也不会意识到这一点 . ）

如果您在线，可以将它与GitHub API一起使用，但是为此目的应该得到personal access token，因为没有身份验证的API调用是有限的 . 在插件的文档中有关于Parsing GFM的更多信息 .

回复于 2024-04-25T16:40:02+08:00
4
使用Jupyter Lab .

要安装Jupyter Lab，请在您的环境中键入以下内容：
```
pip install jupyterlab
```
安装完成后，浏览到markdown文件的位置，右键单击该文件，选择“打开方式”，然后单击“Markdown Preview” .
回复于 2024-04-25T16:40:02+08:00
2

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

安装 Markdown Editor 扩展

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

回复于 2024-04-25T16:40:02+08:00
30

对于Visual Studio Code，我使用

Markdown预览增强扩展 .

回复于 2024-04-25T16:40:02+08:00
0

ReText是一个很好的轻量级降价查看器/编辑器 .

使用实时预览重新文本（来源：ReText;点击图片查看大图）

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

回复于 2024-04-25T16:40:02+08:00
0

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

回复于 2024-04-25T16:40:02+08:00

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

19 回答

来源

开发者说明

想法

原始版本（已弃用）

来源

相关问题