304

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

4

26 に答える 26

176

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

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

于 2012-02-17T15:49:55.293 に答える
103

Atomは箱から出してすぐにうまく機能します-Markdownファイルを開き、 Ctrl + Shift + Mを押して、その横にあるMarkdownプレビューパネルを切り替えます。HTMLと画像も処理します。

Atomのスクリーンショット

于 2016-11-19T18:42:56.287 に答える
58

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

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

また...

Q：VS CodeはGitHubフレーバーマークダウンをサポートしていますか？

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

ここに画像の説明を入力してください

プレビューボタンは次のとおりです。ここに画像の説明を入力してください

詳細はこちら

于 2017-04-11T04:32:38.727 に答える
45

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

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

于 2015-10-23T14:39:02.080 に答える
37

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

于 2012-11-11T01:21:09.697 に答える
34

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

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

于 2014-09-18T21:09:09.787 に答える
7

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

于 2015-01-12T23:56:35.980 に答える
5

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

私はいくつかの既存のオプションを検討しましたが、次の要件を満たすために自分でロールすることにしました。

  • 単一ファイル
  • ローカルでホストされている（イントラネット）URL
  • ブラウザ拡張機能は必要ありません
  • ローカルでホストされているサーバー側の処理はありません（たとえば、PHPはありません）
  • 軽量（たとえば、jQueryなし）
  • 忠実度が高い：GitHubを使用してMarkdownをレンダリングし、同じ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ファイルはGitHubAPIを使用して、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によってホストされていることがGitHubAPIリクエストの制限を回避するかどうか、およびクロスドメインの問題（HTMLページを提供するドメインとは異なるドメインからMarkdownを取得するためにAjaxリクエストを使用する）を実行するかどうかを知りたいです。 。

元のバージョン（非推奨）

好奇心の価値のために、元のバージョンのこの記録を保存しました。このバージョンには、現在のバージョンで解決された次の問題がありました。

  • いくつかの関連ファイルをダウンロードする必要がありました
  • README.mdと同じディレクトリにドロップすることはサポートされていませんでした
  • そのHTMLはより脆弱でした。GitHubの変更の影響を受けやすい

githubディレクトリには、「プレビュー」HTMLファイルと関連ファイルが含まれています。

.../github/
           readme-preview.html
           github.css
           github2.css
           octicons.eot
           octicons.svg
           octicons.woff

CSSとオクティコンのフォントファイルを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を編集して、オクティコンフォントファイルのローカルコピーを参照しました。

私はGitHubページのHTMLを調べ、readmeコンテンツを取り巻くHTML構造を十分に再現して、妥当な忠実度を提供しました。たとえば、制約された幅。

readmeコンテンツのGitHubCSS、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-01T05:41:58.133 に答える
4

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

MarkdownEditor拡張機能 をインストールするスクリーンショット

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

ここに画像の説明を入力してください

于 2018-05-18T19:09:28.783 に答える
3

You may want to take a look at this one:

https://github.com/kristjanjansen/md2html

于 2012-07-03T10:38:46.500 に答える
3

GithubまたはBitbucketテーマについては、オンラインエディタmattstow、URLを使用できます：http ：//writeme.mattstow.com

于 2017-11-21T09:11:04.417 に答える
2

Webを検索するだけで、多くのここに1つが表示されます： https ：//stackedit.io/

于 2015-10-09T18:09:09.070 に答える
2

SublimeText 2/3

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

オプション：

  • ブラウザでプレビューします。
  • HTMLにエクスポートします。
  • クリップボードにコピー。
于 2017-11-15T09:23:48.813 に答える
2

以前のコメントで言及されたSublimeTextのプラグインであるMarkdownPreviewは、ST2との互換性がなくなりましたが、 Sublime Text 3のみをサポートしています（2018年春以降）。

優れている点：GFM、GitHub Flavoured Markdownをサポートしており、通常のMarkdownよりも少し多くのことができます。.mdこれは、 GHで自分のがどのように見えるかを正確に知りたい場合に関連します。（OPがGFMタグ自体を追加しなかったため、この情報を含めると、解決策を探している他の人もそれを認識していない可能性があります。）

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

于 2018-08-04T12:32:18.847 に答える
2

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

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

于 2019-01-25T21:05:35.577 に答える
1

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

于 2016-11-09T18:07:43.303 に答える
1

JupyterLabを使用します。

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

pip install jupyterlab

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

于 2018-05-13T12:42:25.973 に答える
1

Visual Studio Codeには、

MarkdownPreview拡張拡張機能。

于 2018-07-07T11:50:16.657 に答える
1

私はこの質問が古いことを知っています、おそらく誰かがどのようにグーグルしてここに到達したのでしょう。それはとにかく私がこの質問を見た方法です。

githubスタイルでも、Atomテキストエディターを使用してマークダウンプレビューを切り替えることができます。

プレス

ctrl+shift+m

ウィンドウがポップアップするか、[パッケージ]->[マークダウンプレビュー]を使用します。ここに画像の説明を入力してください

これが誰かを助けることを願っています。

于 2020-09-15T19:47:02.103 に答える
1

1つの方法は、Pandocを使用することです（非常に便利です）。

  1. Markdownプレーントテキストをクリップボードにコピーします

  2. 走る：

    xsel -b | pandoc -s -f markdown -t html | xclip -selection clipboard -t text/html | xsel -b

  3. 生成されたフォーマットされたテキストを貼り付けます（たとえば、電子メールやLibreOfficeに）。

Linuxを使用しているとのことですが。pandoc、xsel、xclipパッケージをインストールするだけです。

于 2021-07-17T20:01:21.620 に答える
1

2012年（この質問が作成されたとき）以降、GitHub自体は次のことができます。

  • 通常のリポジトリにMarkdownドキュメントのプレビューを作成して表示します（ 2011年8月以降は常に作成されていました）
  • または、リポジトリに直接影響を与えたくない場合は、要点で同じことを行います（2020年12月以降）
    要点をコミットしなくても、2021年11月以降、編集している要点でMarkdownドキュメントをプレビューできます（しかし、まだコミットしていません）

https://i1.wp.com/user-images.githubusercontent.com/1767415/141661660-d5eb7cbe-7d98-404f-a4ea-cef648c005ee.png?ssl=1

その要点のプレビューが良さそうになったら、その要点からローカルにマークダウンをコピーしREADME.md、追加、コミット、プッシュすることができます。

于 2021-11-17T17:05:16.627 に答える
0

MarkdownViewerPlusPlus は、オンザフライ機能でレンダリングされたMarkdownファイルを表示するための「[...]Notepad++プラグイン」です。

  • 現在選択されているファイル/タブのレンダリングされたHTMLを含むドッキング可能なパネル（トグル）
  • CommonMark準拠（0.28）
  • 同期スクロール
  • カスタムCSS統合
  • HTMLおよびPDFのエクスポート
  • Notepad++Unicodeプラグイン[...]"
于 2020-04-29T04:54:58.370 に答える
0

静的サイトエディターを使用できます。GitLab13.0 （2020年5月）では、WYSIWYGパネルが付属しています。

静的サイトエディター用のWYSIWYG

Markdownは、Webコンテンツを作成するための強力で効率的な構文ですが、Markdownコンテンツの経験豊富な作成者でさえ、あまり使用されないフォーマットオプションのいくつかを覚えたり、適度に複雑なテーブルを最初から作成したりするのに苦労する可能性があります。
リッチテキスト「あなたが見るものはあなたが得るものである」（WYSIWYG）エディターでよりよく達成されるいくつかの仕事があります。

GitLab 13.0は、ヘッダー、太字、斜体、リンク、リスト、ブロッククォート、コードブロックなどの一般的なフォーマットオプションのフォーマットオプションを使用して、静的サイトエディターにWYSIWYGマークダウンオーサリングエクスペリエンスをもたらします。

https://about.gitlab.com/images/13_0/wysiwyg-markdow-in-sse.png

WYSIWYGエディターは、スプレッドシートを編集するのと同じ方法でテーブルの行、列、セルを視覚的に編集できるようにすることで、Markdownでテーブルを編集するという面倒な作業も取り除きます。生のMarkdownでより快適に書くために、WYSIWYGモードとプレーンテキスト編集モードを切り替えるためのタブもあります。

ドキュメントと問題を参照してください。

繰り返しになりますが、これは自分の：を書くためだけに使用しますREADME。見栄えが良ければ、元のプロジェクトに報告できます。
ただし、重要なのは、サードパーティのマークダウンプレビュープラグインはもう必要ないということです。

そしてGitLab14.2（2021年8月）

編集中にMarkdownをライブでプレビュー

Markdownは、リッチなWebコンテンツを作成するための高速で直感的な構文です。そうでないまで。幸い、Markdownのレンダリングされた出力をプレビューして、[プレビュー]タブ
からマークアップの精度を確認するのは簡単です。

残念ながら、生のソースコードとプレビューの間を移動するために必要なコンテキストスイッチは、面倒でフローを混乱させる可能性があります。

現在、Web IDEと単一ファイルエディタの両方で、Markdownファイルに新しいライブプレビューオプションが利用可能になっています。エディターを右クリックして[マークダウンのプレビュー]を選択するか、を使用Command/Control + Shift + Pしてマークダウンコンテンツの分割画面ライブプレビューを切り替えます。
入力するとプレビューが更新されるため、マークアップが有効であり、意図したとおりにレンダリングされることを確信できます。

https://about.gitlab.com/images/14_2/create-markdown-live-preview.png-編集中にMarkdownをライブでプレビュー

ドキュメントとエピックを参照してください。

GitLab 14.6（2021年12月）を参照してください

Wikiエディターをシームレスに切り替えます

Wikiエディターをシームレスに切り替えます

新しいリッチなMarkdownエディターでWikiページを編集すると、Markdown構文をどれだけよく知っているかに関係なく、誰もが簡単に貢献できるようになります。
状況によっては生のMarkdownを作成することもできますが、テーブルの作成など、より複雑で面倒なフォーマットタスクにはWYSIWYGインターフェイスを使用します。

以前のバージョンのGitLabでは、リッチなMarkdownエディターとMarkdownソースを切り替える前に変更を保存する必要があり、編集にさらに多くの手順と摩擦が追加されました。

GitLab 14.6では、変更をコミットせずに2つの編集エクスペリエンスをシームレスに切り替えて、いつでもニーズに合ったエディターを選択できるようになりました。

ドキュメントと問題を参照してください。

于 2020-05-22T22:43:48.707 に答える
0

markdownlivepreview.comがバニラGitLabマークダウンにかなり近いことがわかりました。他のビューアは、GitLabとは少し異なる方法でコマンドを解釈しました。

于 2021-02-25T14:51:30.760 に答える
0

「機能」ブランチを作成し、それをgithubにプッシュして変更を加えます。これにより、githubでの外観が正確に表示されます。

次に、満足したら、メインにリベースするか、メインへのプルリクエストを実行します。どちらのプロセスを使用していてもかまいません。

リポジトリが企業ファイアウォールの背後にあるか、オフラインで作業する必要がない限り、gitを使用するときにローカルでテストする必要はほとんどありません。

このような場合、AtomとVScodeの両方に適切なMarkdownレンダラーがあり、変更がgithubでどのように表示されるかを示すには十分ではありませんが、変更が正しい方向に進んでいるかどうかを確認するには十分です。

于 2021-10-01T22:52:43.433 に答える
-1

iPadで開発したい人には、Textasticが好きです。クラウドからドキュメントをダウンロードすると、インターネットに接続せずにREADME.mdファイルを編集およびプレビューできます。

于 2017-12-05T18:00:28.027 に答える