wake-up-neo.com

Wie kann ich testen, wie meine readme.md-Datei aussehen wird, bevor Sie sich für github entscheiden?

Ich schreibe eine Readme-Datei für mein Github-Projekt im .md-Format. Gibt es eine Möglichkeit, zu testen, wie meine readme.md-Datei aussehen wird, bevor Sie sich für github entscheiden? 

githubmarkdowngithub-flavored-markdown
160
Usman Ismail

Viele Möglichkeiten: Wenn Sie einen Mac verwenden, verwenden Sie Mou .

Wenn Sie in einem Browser testen möchten, können Sie StackEdit versuchen, wie von @Aaron oder Dillinger angegeben, da Notepag jetzt heruntergefahren ist. Ich persönlich benutze Dillinger, da es einfach funktioniert und alle meine Dokumente in der lokalen Datenbank meines Browsers speichert.

112
three

Atom funktioniert prima aus dem Kasten heraus - öffnen Sie einfach die Markdown-Datei und drücken Sie Ctrl + Shift + M, um den Markdown-Vorschaubereich daneben zu wechseln. Es behandelt auch HTML und Bilder. 

 Atom screenshot

44
Brian Burns

Dieser hat sich seit einiger Zeit als zuverlässig erwiesen: http://tmpvar.com/markdown.html

31
Motin

Normalerweise bearbeite ich es einfach direkt auf der GitHub-Website und klicke auf "Vorschau" direkt über dem Bearbeitungsfenster.

Vielleicht ist dies eine neue Funktion, die seit der Veröffentlichung dieses Beitrags hinzugefügt wurde.

23
Justin Harris

Dies ist eine ziemlich alte Frage, aber da ich beim Durchsuchen des Internets darauf gestoßen bin, ist meine Antwort möglicherweise für andere hilfreich .. Ich habe gerade ein sehr nützliches CLI-Tool für das Rendern von GitHub-Effekt gefunden: grip . Es verwendet die API von GitHub und wird daher ziemlich gut dargestellt.

Ehrlich gesagt hat der Entwickler von grip auf diese sehr ähnlichen Fragen eine ausführlichere Antwort:

23
aleimba

Visual Studio Code bietet die Möglichkeit, Änderungen an der MD-Datei zu bearbeiten und eine Vorschau anzuzeigen. Da VS Code plattformunabhängig ist, funktioniert dies für Windows, Mac und Linux.

Um zwischen den Ansichten zu wechseln, drücken Sie im Editor Strg + Umschalt + V. Sie können die Vorschau nebeneinander (Strg + K V) mit der Datei anzeigen, die Sie gerade bearbeiten, und die Änderungen in Echtzeit während der Bearbeitung sehen.

Ebenfalls...

F: Unterstützt VS Code GitHub Flavored Markdown?

A: Nein, VS Code zielt mit der Markdown-it-Bibliothek auf die CommonMark Markdown-Spezifikation ab. GitHub nähert sich der CommonMark-Spezifikation.

Weitere Details hier

11
Nikhil Agrawal

Vielleicht möchten Sie einen Blick darauf werfen:

https://github.com/kristjanjansen/md2html

4
Eduardo

Verwenden Sie im Web Dillinger . Es ist toll.

4
Roberto

Ich verwende eine lokal gehostete HTML-Datei, um eine Vorschau der GitHub-Readmes anzuzeigen.

Ich habe mir verschiedene Optionen angesehen, aber ich habe mich entschieden, meine eigenen zu rollen, um die folgenden Anforderungen zu erfüllen:

  • Einzelne Datei
  • Lokal gehostete (Intranet) URL
  • Keine Browsererweiterung erforderlich
  • Keine lokal gehostete serverseitige Verarbeitung (z. B. kein PHP)
  • Leichtgewicht (z. B. keine jQuery)
  • High Fidelity: Verwenden Sie GitHub, um den Markdown und das gleiche CSS zu rendern

Ich behalte lokale Kopien meiner GitHub-Repositorys in gleichgeordneten Verzeichnissen unter einem "github" -Verzeichnis.

Jedes Repo-Verzeichnis enthält eine README.md-Datei:

.../github/
           repo-a/
                  README.md
           repo-b/
                  README.md
           etc.

Das github-Verzeichnis enthält die HTML-Datei "preview":

.../github/
           readme.html

Um eine Readme-Datei in der Vorschau anzuzeigen, browse ich in github/readme.html und gebe das Repo in der Abfragezeichenfolge an:

http://localhost/github/readme.html?repo-a

Alternativ können Sie die readme.html in dasselbe Verzeichnis wie die Datei README.md kopieren und die Abfragezeichenfolge weglassen:

http://localhost/github/repo-a/readme.html

Befindet sich die readme.html im selben Verzeichnis wie die Datei README.md, müssen Sie die readme.html nicht einmal über HTTP bereitstellen: Sie können sie einfach über Ihr Dateisystem öffnen.

Die HTML-Datei verwendet die GitHub-API , um den Markdown in einer README.md-Datei darzustellen. Es gibt ein Rate-Limit : Zum Zeitpunkt des Schreibens 60 Anfragen pro Stunde.

Funktioniert für mich in aktuellen Produktionsversionen von Chrome, IE und Firefox unter Windows 7.

Quelle

Hier ist die HTML-Datei (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>

Hinweise für Entwickler

  • Normalerweise wickle ich meinen Code in eine IIFE ein, aber in diesem Fall sah ich die Notwendigkeit nicht und dachte, ich würde es kurz halten
  • Ich habe mich nicht darum gekümmert, den Backlevel-IE zu unterstützen
  • Der Einfachheit halber habe ich den Fehlerbehandlungscode ausgelassen (glauben Sie mir ?!)
  • Ich würde gerne JavaScript-Programmiertipps erhalten

Ideen

  • Ich überlege mir, ein GitHub-Repository für diese HTML-Datei zu erstellen und die Datei in den gh-pages-Zweig zu setzen, sodass GitHub sie als "normale" Webseite darstellt. Ich würde die Datei so anpassen, dass eine vollständige URL der README (oder einer anderen Markdown-Datei) als Abfragezeichenfolge akzeptiert wird. Ich bin neugierig, ob durch GitHub gehostet wird, das GitHub-API-Anforderungslimit zu umgehen, und ob ich domänenübergreifende Probleme ausführt (mithilfe einer Ajax-Anforderung, um Markdown von einer anderen Domäne als der Domäne zu erhalten, die die HTML-Seite bereitstellt). .

Originalversion (veraltet)

Ich habe dieses Protokoll der Originalversion für den Kuriositätswert ... beibehalten. Diese Version hatte die folgenden Probleme, die in der aktuellen Version behoben wurden:

  • Es mussten einige verwandte Dateien heruntergeladen werden
  • Es wurde nicht unterstützt, in demselben Verzeichnis abgelegt zu werden wie README.md
  • Sein HTML war spröder; anfälliger für Änderungen in GitHub

Das github-Verzeichnis enthält die HTML-Datei "preview" und zugehörige Dateien:

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

Ich habe die CSS- und Octicons-Schriftdateien von GitHub heruntergeladen:

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)

Ich habe die CSS-Dateien umbenannt, um die lange Folge von Hex-Ziffern in den ursprünglichen Namen wegzulassen.

Ich habe github.css bearbeitet, um auf die lokalen Kopien der Octicons-Schriftdateien zu verweisen.

Ich habe den HTML-Code einer GitHub-Seite untersucht und ausreichend HTML-Struktur des Readme-Inhalts reproduziert, um eine angemessene Genauigkeit zu gewährleisten. zum Beispiel die eingeschränkte Breite.

Das GitHub-CSS, die Octicons-Schriftart und der HTML-Container für den Inhalt der Readme-Datei sind bewegliche Ziele: Ich muss regelmäßig neue Versionen herunterladen.

Ich habe mit CSS aus verschiedenen GitHub-Projekten gespielt. Zum Beispiel:

<link rel="stylesheet" type="text/css"
      href="http://rawgit.com/sindresorhus/github-markdown-css/gh-pages/github-markdown.css">

entschied sich aber schließlich für die Verwendung des CSS von GitHub.

Quelle

Hier ist die HTML-Datei (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

Für Github oder Bitbucket könnte der Online-Editor mattstow verwendet werden, url: http://writeme.mattstow.com

2
Eric Wang

Durch das Durchsuchen des Internets erhält man viele Heresen: https://stackedit.io/

2
resultsway

Markdown Preview , das Plugin für Sublime Text, das in einem früheren Kommentar erwähnt wurde, ist nicht mehr mit ST2 kompatibel, unterstützt jedoch nur Sublime Text 3 (seit Frühjahr 2018).

Was ist schön daran: Es unterstützt GFM, GitHub Flavored Markdown , das einiges mehr kann als das reguläre Markdown. Dies ist von Bedeutung, wenn Sie wissen möchten, wie Ihre .mds auf GH genau aussehen werden. (Einschließlich dieser Info, da das OP das GFM-Tag nicht selbst hinzugefügt hat und andere, die nach einer Lösung suchen, dies möglicherweise nicht wissen.)

Sie können es mit der GitHub-API verwenden, wenn Sie online sind. Allerdings sollten Sie für diesen Zweck ein persönliches persönliches Zugriffstoken erhalten, da API-Aufrufe ohne Authentifizierung begrenzt sind. Weitere Informationen zu Parsing GFM finden Sie in den Plugins des Plugins.

2
Kay

Wenn Sie Pycharm (oder ein anderes Jetbrains IDE wie Intellij, RubyMine, PHPStorm usw.) verwenden, gibt es in Ihrer IDE mehrere kostenlose Plug-Ins für Markdown-Unterstützung, die eine Echtzeitvorschau während der Bearbeitung ermöglichen. Das Markdown Navigator-Plugin ist ziemlich gut. Wenn Sie eine .md-Datei in der IDE öffnen, bieten neuere Versionen die Möglichkeit, unterstützende Plugins zu installieren und die Liste anzuzeigen. 

1
randalv

SublimeText 2/3

Installiere das Paket: Markdown Preview

Optionen:

  • Vorschau im Browser.
  • Export nach HTML.
  • In die Zwischenablage kopieren.
1
alditis

ReText ist ein guter, leichter Markdown-Viewer Editor.

/ - ReText with Live Preview
ReText mit Live-Vorschau (Quelle: ReText; Bild anklicken für größere Variante)

Ich habe es dank Izzy gefunden, der geantwortet hat https://softwarerecs.stackexchange.com/questions/17714/simple-markdown-viewer-for-ubuntu (andere Antworten erwähnen andere Möglichkeiten)

0
Mateusz Konieczny

Für Visual Studio Code verwende ich 

Markdown Preview Erweiterte Erweiterung. 

0
Olusola Omosola

Ich verwende markdownlivepreview: 
https://markdownlivepreview.com/

Es ist sehr einfach, einfach und schnell.

0
Mariano Cali

Für Visual Studio-Benutzer (nicht VS-Code).

Installieren Sie Markdown Editor Erweiterung  Screenshot

Auf diese Weise haben Sie beim Öffnen einer README.md auf der rechten Seite eine Live-Vorschau.

 enter image description here

0
Guilherme de Jesus Santos

Verwenden Sie Jupyter Lab .

Geben Sie zur Installation von Jupyter Lab in Ihrer Umgebung Folgendes ein:

pip install jupyterlab

Navigieren Sie nach der Installation zum Speicherort Ihrer Markdown-Datei, klicken Sie mit der rechten Maustaste auf die Datei, wählen Sie "Öffnen mit" und klicken Sie auf "Markdown-Vorschau".

0
k0L1081