私のgithubプロジェクトのREADMEを.md形式で書いています。githubにコミットする前に、readme.mdファイルがどのようになるかをテストする方法はありますか？
回答:
多くの方法：Macを使用している場合は、Mouを使用します。
ブラウザでテストしたい場合は、試みることができるStackEditを @Aaronかによって尖ったアウトとして、デリンジャー以来Notepagは今ダウンしているようです。個人的には私はディリンジャーを使用します。ディリンジャーは機能し、すべてのドキュメントをブラウザーのローカルデータベースに保存するだけだからです。
Atomはそのままで問題なく機能します。Markdownファイルを開いて Ctrl + Shift + Mを押すだけで、その横にあるMarkdownプレビューパネルが切り替わります。HTMLと画像も処理します。
atom .、readmeを右クリックしました>Markdown Preview
<details>タグを介して折りたたみ可能なセクションをサポートしていませんでした。Atomは、他のブートよりも優れており、見栄えも良いです。
これはかなり長い間信頼できることが証明されています：http : //tmpvar.com/markdown.html
これはかなり古い質問ですが、インターネットを検索しているときに偶然見つけたので、私の答えは他の人に役立つかもしれません。GitHub風味のマークダウンをレンダリングするための非常に便利なCLIツールを見つけました：グリップ。GitHubのAPIを使用しているため、非常によくレンダリングされます。
率直に言って、グリップの開発者は、これらの非常によく似た質問に対して、より手の込んだ答えを持っています。
私は通常、GitHub Webサイトで直接編集して、編集ウィンドウのすぐ上にある[プレビュー]をクリックします。
おそらくこれは、この投稿が作成されてから追加された新機能です。
xxx.mdを付けてコードをそこに貼り付けることができます。ファイル拡張子は.md、変更をプレビューできるようにするためのものです。完了したユーティリティを更新し、ファイルの内容をコピーして元のreadme.mdファイルに貼り付けます。
<div align='center'><img ...></div>中央に配置すると、プレビューで中央に表示されず、左揃えになります。正確に表示するには保存する必要があるため、プレビューは信頼できないと思います。
Visual Studio Codeには、mdファイルの変更を編集およびプレビューするオプションがあります。VS Codeはプラットフォームに依存しないため、これはWindows、Mac、Linuxで機能します。
ビューを切り替えるには、エディターでCtrl + Shift + Vを押します。編集中のファイルと並べてプレビュー（Ctrl + KV）を表示し、編集中にリアルタイムで反映された変更を確認できます。
また...
Q：VSコードはGitHubフレーバーマークダウンをサポートしていますか？
A：いいえ。VSCodeは、markdown-itライブラリを使用してCommonMark Markdown仕様をターゲットにしています。GitHubはCommonMark仕様に移行しています。
ウェブではDillingerを使用します。それは素晴らしいです。
ローカルでホストされているHTMLファイルを使用して、GitHubのreadmeをプレビューしています。
私はいくつかの既存のオプションを調べましたが、次の要件を満たすために自分でロールすることにしました。
私はGitHubリポジトリのローカルコピーを「github」ディレクトリの下の兄弟ディレクトリに保存しています。
各repoディレクトリーには、README.mdファイルが含まれています。
.../github/
repo-a/
README.md
repo-b/
README.md
etc.
githubディレクトリには、「プレビュー」HTMLファイルが含まれています。
.../github/
readme.html
readmeをプレビューするには、クエリ文字列でリポジトリを指定して、github / readme.htmlを参照します。
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をレンダリングします。レート制限があります。執筆時点では、1時間あたり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>好奇心の価値のために、元のバージョンのこのレコードを保存しました。このバージョンには、現在のバージョンで解決された次の問題がありました。
githubディレクトリには、「プレビュー」HTMLファイルと関連ファイルが含まれています。
.../github/
readme-preview.html
github.css
github2.css
octicons.eot
octicons.svg
octicons.woff
CSSとocticonsフォントファイルをGitHubからダウンロードしました。
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ファイルの名前を変更して、元の名前の16進数の長い文字列を省略しました。
github.cssを編集して、octiconsフォントファイルのローカルコピーを参照しました。
私はGitHubページのHTMLを調べ、readmeコンテンツを囲むHTML構造を十分に再現して、妥当な忠実度を提供しました。たとえば、制約された幅。
GitHubのCSS、octiconsフォント、およびreadmeコンテンツの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>あなたはこれを見てみたいかもしれません：
用GithubやBitbucketテーマ、オンラインエディタ使用することができmattstowを、URL：http://writeme.mattstow.com
Visual Studioユーザー（VS CODEではありません）。
Markdown Editor拡張機能
をインストールする
これにより、README.mdを開くと、右側にライブプレビューが表示されます。
ウェブを検索するだけで多くのheres 1が得られます：https : //stackedit.io/
Markdown Preview、以前のコメントで言及された Sublime Textのプラグインは、ST2との互換性がなくなり、 Sublime Text 3のみをサポートします（2018年春以降）。
何がいいのか：GFM、GitHub Flavored Markdownをサポートしており、通常のMarkdownよりも少し多くのことができます。.mdsがGHでどのように見えるかを正確に知りたい場合、これは適切です。（OPがGFMタグ自体を追加しなかったため、この情報を含めます。また、解決策を探している他の人もそれを認識していない可能性があります。）
オンラインの場合は、GitHub APIで使用できますが、認証なしのAPI呼び出しは制限されているため、この目的のために個人用アクセストークンを取得する必要があります。プラグインのドキュメントにGFMの解析に関する詳細があります。
SublimeText 2/3
インストールパッケージ： Markdown Preview
オプション：
Jupyter Labを使用します。
Jupyter Labをインストールするには、環境で次のように入力します。
pip install jupyterlab
インストール後、マークダウンファイルの場所を参照し、ファイルを右クリックして[プログラムから開く]を選択し、[マークダウンプレビュー]をクリックします。
ReTextは、軽量で優れたマークダウンビューアー/エディターです。
ライブプレビュー付きのReText（ソース：ReText、画像をクリックすると大きなバリエーションが表示されます）
/softwarerecs/17714/simple-markdown-viewer-for-ubuntuに回答したIzzyのおかげで見つかりました（他の回答では他の可能性について言及しています）
私はmarkdownlivepreviewを使用しています：
ます https //markdownlivepreview.com/
それは非常に簡単、シンプル、そして高速です。
MarkdownViewerPlusPlus は、「[...] Notepad ++プラグインであり、オンザフライでレンダリングされたMarkdownファイルを表示します
あなたは使用することができ、静的なサイトエディタを：でGitLab 13.0（2020年5月）、それはWYSIWYGパネルが付属しています。
Static Site EditorのWYSIWYG
MarkdownはWebコンテンツを作成するための強力で効率的な構文ですが、Markdownコンテンツの経験豊富な作成者でさえ、あまり使用されない書式設定オプションを覚えたり、適度に複雑なテーブルを最初から作成したりするのに苦労する場合があります。
リッチテキスト「WYSIWYG」エディタを使用すると、より優れた仕事が得られます。GitLab 13.0は、ヘッダー、太字、斜体、リンク、リスト、ブロック引用符、コードブロックなどの一般的なフォーマットオプションのフォーマットオプションを備えたWYSIWYG MarkdownオーサリングエクスペリエンスをStatic Site Editorにもたらします。
WYSIWYGエディターはまた、スプレッドシートを編集するのと同じ方法でテーブルの行、列、セルを視覚的に編集できるようにすることで、Markdownでテーブルを編集するという面倒なタスクを取り除きます。生のMarkdownでより快適に書くために、WYSIWYGとプレーンテキスト編集モードを切り替えるためのタブもあります。
繰り返しになりますが、それを書くためだけに使用しますREADME。見た目が良ければ、元のプロジェクトに報告できます。
しかし、要点は、サードパーティのマークダウンプレビュープラグインはもう必要ないということです。
