web-dev-qa-db-ja.com

githubにコミットする前に、readme.mdファイルの外観をテストするにはどうすればよいですか？

GithubプロジェクトのREADMEを.md形式で書いています。 githubにコミットする前に、readme.mdファイルがどのように見えるかをテストする方法はありますか？

githubmarkdowngithub-flavored-markdown
181
Usman Ismail

多くの方法：Macを使用している場合は、 Mo を使用します。

ブラウザでテストしたい場合は、 Notepag がダウンしているように見えるため、@-Aaronまたは Dillinger が指摘するように StackEdit を試すことができます。 。個人的には、Dillingerを使用しています。これは、Dillingerが機能し、すべてのドキュメントをブラウザのローカルデータベースに保存するからです。

119
three

Atom はそのまま使用できます-Markdownファイルを開いてCtrlを押すだけです+ Shift + Mで横のマークダウンプレビューパネルを切り替えます。 HTMLと画像も処理します。

Atom screenshot

51
Brian Burns

これはかなり長い間信頼性が証明されています： http://tmpvar.com/markdown.html

32
Motin

これはかなり古い質問ですが、インターネットを検索しているときにつまずいたので、私の答えは他の人に役立つかもしれません。 GitHub風味のマークダウンをレンダリングするための非常に便利なCLIツールを見つけました： grip 。 GitHubのAPIを使用しているため、非常によくレンダリングされます。

率直に言って、 grip の開発者は、これらの非常によく似た質問に対してより精巧な答えを持っています。

25
aleimba

通常、GitHub Webサイトで直接編集し、編集ウィンドウのすぐ上にある[プレビュー]をクリックします。

おそらくそれは、この投稿が作成されてから追加された新しい機能です。

24
Justin Harris

Visual Studio Codeには、mdファイルの変更を編集およびプレビューするオプションがあります。 VS Codeはプラットフォームに依存しないため、Windows、Mac、Linuxで機能します。

ビューを切り替えるには、エディターでCtrl + Shift + Vを押します。プレビューを編集中のファイルと並べて（Ctrl + KV）表示し、編集中にリアルタイムで反映される変更を確認できます。

また...

Q：VS CodeはGitHub Flavored Markdownをサポートしていますか？

A：いいえ、VS Codeはmarkdown-itライブラリを使用してCommonMark Markdown仕様を対象としています。 GitHubはCommonMark仕様に向かっています。

詳細はこちら

16
Nikhil Agrawal

Webでは、 Dillinger を使用します。それは素晴らしいです。

5
Roberto

あなたはこれを見てみたいかもしれません：

https://github.com/kristjanjansen/md2html

4
Eduardo

ローカルでホストされているHTMLファイルを使用して、GitHubのreadmeをプレビューします。

いくつかの既存のオプションを調べましたが、次の要件を満たすために独自のオプションを使用することにしました。

  • 単一ファイル
  • ローカルでホストされる（イントラネット）URL
  • ブラウザの拡張機能は必要ありません
  • ローカルでホストされるサーバー側の処理はありません（たとえば、PHPはありません）
  • 軽量（たとえば、jQueryなし）
  • 高忠実度：GitHubを使用してマークダウンをレンダリングし、同じCSS

GitHubリポジトリのローカルコピーは、「github」ディレクトリの下の兄弟ディレクトリに保管します。

各リポジトリディレクトリには、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ファイルでマークダウンをレンダリングします。 レート制限 ：執筆時点では、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>

開発者向けメモ

  • 通常、IIFEでコードをラップしますが、この場合、必要性が見えず、簡潔に保つと思いました
  • 私はバックレベルIEのサポートを気にしませんでした
  • 簡潔にするために、エラー処理コードを省略しました（私を信じますか？！）
  • JavaScriptプログラミングのヒントを歓迎します

アイデア

  • このHTMLファイル用にGitHubリポジトリを作成し、そのファイルをgh-pagesブランチに配置して、GitHubが「通常の」Webページとして機能するようにすることを検討しています。 README（またはその他のMarkdownファイル）の完全なURLをクエリ文字列として受け入れるようにファイルを調整します。 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ファイルの名前を変更して、元の名前の16進数の長い文字列を省略しました。

Github.cssを編集して、octiconsフォントファイルのローカルコピーを参照しました。

GitHubページのHTMLを調べ、妥当な忠実度を提供するためにreadmeコンテンツを囲むHTML構造を十分に再現しました。たとえば、制約された幅。

ReadmeコンテンツのGitHub CSS、オクティコンフォント、および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>
4
Graham Hannington

GithubまたはBitbucketテーマの場合、オンラインエディターmattstow、url： http://writeme.mattstow.com を使用できます

2
Eric Wang

Webを検索するだけで、多くのheresが得られます： https://stackedit.io/

2
resultsway

Markdownプレビュー 、以前のコメントで言及されたSublime TextのプラグインはST2と互換性がありませんこれ以上、ただしSublime Text 3（2018年春以降）のみをサポートします。

すばらしい点は、GFM、 GitHub Flavored Markdown をサポートしていることです。これにより、通常のMarkdownよりも少し多くのことができます。これは、.mdsがGH上でどのように見えるかを正確に知りたい場合に関連します。 （OPはGFMタグ自体を追加しなかったため、この情報を含め、ソリューションを探している他の人もそれを認識していない可能性があります。）

オンラインの場合はGitHub APIで使用できますが、認証なしのAPI呼び出しは制限されているため、この目的で パーソナルアクセストークン を取得する必要があります。プラグインのドキュメントに Parsing GFM に関する詳細情報があります。

2
Kay

Pycharm（またはIntellij、RubyMine、PHPStormなどの別のJetbrains IDE）を使用している場合は、IDEにMarkdownサポート用の複数の無料プラグインがあり、リアルタイムを可能にします編集中にプレビューします。 Markdown Navigatorプラグインは非常に優れています。 IDEで.mdファイルを開くと、最新バージョンではサポートプラグインのインストールとリストの表示が提供されます。

1
randalv

SublimeText 2/

インストールパッケージ：Markdown Preview

オプション：

  • ブラウザでプレビューします。
  • Htmlにエクスポートします。
  • クリップボードにコピー。
1
alditis

ReText は、優れた軽量のマークダウンビューアー/エディターです。

ReText with Live Preview
ライブプレビューでのReText（出典：ReText。画像をクリックすると拡大版が表示されます）

https://softwarerecs.stackexchange.com/questions/17714/simple-markdown-viewer-for-ubunt （他の回答は他の可能性に言及）

0
Mateusz Konieczny

Visual Studio Codeの場合、私は

Markdown Preview拡張機能拡張。

0
Olusola Omosola

私はmarkdownlivepreviewを使用しています：
https://markdownlivepreview.com/

それは非常に簡単、シンプル、高速です。

0
Mariano Cali

Visual Studioユーザーの場合（VS CODEではありません）。

インストールMarkdown Editor拡張機能 Screenshot

このようにして、README.mdを開くと、右側にライブプレビューが表示されます。

enter image description here

0
Guilherme de Jesus Santos

Jupyter Lab を使用します。

Jupyter Labをインストールするには、環境に次のように入力します。

pip install jupyterlab

インストール後、マークダウンファイルの場所を参照し、ファイルを右クリックして、[プログラムから開く]を選択し、[マークダウンプレビュー]をクリックします。

0
k0L1081