你可以使用静态网站编辑器:在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.

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

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

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

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

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

VS代码

Mac: Command + Shift + V

Windows操作系统:Ctrl + Shift + V

详细说明

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