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 ich mich zu github verpflichte?

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

Wenn Sie in einem Browser testen möchten, können Sie StackEdit ausprobieren , wie von @Aaron oder Dillinger hervorgehoben, da Notepag jetzt nicht verfügbar zu sein scheint. Persönlich verwende ich Dillinger, da es einfach funktioniert und alle meine Dokumente in der lokalen Datenbank meines Browsers speichert.

Atom funktioniert sofort - öffnen Sie einfach die Markdown-Datei und drücken Sie Strg + Umschalt + M, um das Markdown-Vorschaufenster daneben umzuschalten. Es verarbeitet auch HTML und Bilder.

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

Dies ist eine ziemlich alte Frage, aber da ich beim Durchsuchen des Internets darauf gestoßen bin, ist meine Antwort vielleicht für andere nützlich. Ich habe gerade ein sehr nützliches CLI-Tool zum Rendern von Markdown mit GitHub-Geschmack gefunden: Grip . Es verwendet die GitHub-API und rendert daher recht gut.

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

• Gibt es ein Befehlszeilenprogramm zum Rendern von Markdowns mit Github-Geschmack?
• Was ist der beste Weg, um GitHubs Readme.md zu bearbeiten?

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

Vielleicht ist das eine neue Funktion, die hinzugefügt wurde, seit dieser Beitrag erstellt wurde.

Visual Studio Code bietet die Möglichkeit, Änderungen an MD-Dateien zu bearbeiten und in der 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 neben der zu bearbeitenden Datei (Strg + KV) anzeigen und Änderungen beim Bearbeiten in Echtzeit anzeigen.

Ebenfalls...

F: Unterstützt VS Code GitHub Flavored Markdown?

A: Nein, VS Code zielt mithilfe der Markdown-it-Bibliothek auf die CommonMark Markdown-Spezifikation ab. GitHub bewegt sich in Richtung der CommonMark-Spezifikation.

Weitere Details hier

Verwenden Sie im Web Dillinger . Es ist toll.

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

Ich habe mir mehrere vorhandene Optionen angesehen, mich jedoch entschlossen, 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 (zum Beispiel keine jQuery)
• High-Fidelity: Verwenden Sie GitHub, um den Markdown und dasselbe CSS zu rendern

Ich behalte lokale Kopien meiner GitHub-Repositorys in Geschwisterverzeichnissen 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 "Vorschau":

.../github/
           readme.html

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

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

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

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

Wenn sich die Datei readme.html im selben Verzeichnis wie README.md befindet, müssen Sie readme.html nicht einmal über HTTP bereitstellen: Sie können sie einfach direkt von Ihrem Dateisystem aus öffnen.

Die HTML-Datei verwendet die GitHub-API , um den Markdown in einer README.md-Datei zu rendern. Es gibt ein Ratenlimit : 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>

Anmerkungen des Entwicklers

• Normalerweise verpacke ich meinen Code in ein IIFE, aber in diesem Fall habe ich die Notwendigkeit nicht erkannt und dachte, ich würde es kurz halten
• Ich habe mich nicht darum gekümmert, Backlevel IE zu unterstützen
• Aus Gründen der Übersichtlichkeit habe ich den Fehlerbehandlungscode weggelassen (glauben Sie mir?!)
• Ich würde JavaScript-Programmiertipps begrüßen

Ideen

• Ich denke darüber nach, ein GitHub-Repository für diese HTML-Datei zu erstellen und die Datei in den Zweig gh-pages zu stellen, damit GitHub sie als "normale" Webseite dient. Ich würde die Datei optimieren, um eine vollständige URL - der README-Datei (oder einer anderen Markdown-Datei) - als Abfragezeichenfolge zu akzeptieren. Ich bin gespannt, ob das Hosting durch GitHub das GitHub-API-Anforderungslimit umgehen würde und ob ich domänenübergreifende Probleme habe (mithilfe einer Ajax-Anforderung, um den Markdown von einer anderen Domain als der Domain zu erhalten, die die HTML-Seite bedient). .

Originalversion (veraltet)

Ich habe diese Aufzeichnung der Originalversion aus Neugier aufbewahrt. 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 dasselbe Verzeichnis wie README.md verschoben zu werden
• Sein HTML war spröder; anfälliger für Änderungen in GitHub

Das Github-Verzeichnis enthält die HTML-Datei "Vorschau" 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 die HTML-Struktur, die den Readme-Inhalt umgibt, ausreichend reproduziert, um eine angemessene Wiedergabetreue zu gewährleisten. Zum Beispiel die eingeschränkte Breite.

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

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

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

entschied sich aber schließlich, das CSS von GitHub selbst zu verwenden.

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>

Vielleicht möchten Sie sich diesen ansehen:

https://github.com/kristjanjansen/md2html

Für Githuboder BitbucketThema könnte Online-Editor mattstow , URL: http://writeme.mattstow.com verwenden

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

Installieren Sie die Markdown Editor- Erweiterung

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

Nur das Durchsuchen des Webs gibt vielen hier eine: https://stackedit.io/

Markdown Preview , dasin einem früheren Kommentar erwähntePlugin für Sublime Text ist nicht mehr mit ST2 kompatibel, sondern unterstützt nur noch Sublime Text 3 (seit Frühjahr 2018).

Das Schöne daran: Es unterstützt GFM, GitHub Flavored Markdown , das etwas mehr kann als normales Markdown. Dies ist relevant, wenn Sie wissen möchten, wie Ihre .mds auf GH genau aussehen werden. _{^{(Einschließlich dieser Informationen, da das OP das GFM-Tag nicht selbst hinzugefügt hat und andere, die nach einer Lösung suchen, dies möglicherweise auch nicht wissen.)}}

Sie können es mit der GitHub-API verwenden, wenn Sie online sind. Sie sollten jedoch zu diesem Zweck ein persönliches Zugriffstoken erhalten, da API-Aufrufe ohne Authentifizierung eingeschränkt sind. Weitere Informationen zum Parsen von GFM finden Sie in den Dokumenten des Plugins.

Wenn Sie Pycharm (oder eine andere Jetbrains-IDE wie Intellij, RubyMine, PHPStorm usw.) verwenden, gibt es direkt in Ihrer IDE mehrere kostenlose Plugins für die 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 Installation unterstützender Plugins an und zeigen Ihnen die Liste an.

SublimeText 2/3

Installationspaket: Markdown Preview

Optionen:

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

Verwenden Jupyter Lab .

Geben Sie zur Installation von Jupyter Lab Folgendes in Ihre Umgebung 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 dann auf "Markdown-Vorschau".

Für Visual Studio Code verwende ich

Markdown Preview Erweiterte Erweiterung.

ReText ist ein guter, leichter Markdown-Viewer / Editor.

^{ReText mit Live-Vorschau (Quelle: ReText; Bild anklicken für größere Variante)}

Ich fand es dank Izzy, der /softwarerecs/17714/simple-markdown-viewer-for-ubuntu antwortete (andere Antworten erwähnen andere Möglichkeiten)

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

Es ist sehr einfach, einfach und schnell.

MarkdownViewerPlusPlus ist ein "[...] Notepad ++ - Plugin zum Anzeigen einer Markdown-Datei, die im laufenden Betrieb gerendert wird

• Andockbares Bedienfeld (Umschalten) mit einem gerenderten HTML-Code der aktuell ausgewählten Datei / Registerkarte
• CommonMark-konform (0,28)
• Synchronisiertes Scrollen
• Benutzerdefinierte CSS-Integration
• HTML- und PDF-Export
• Notepad ++ Unicode Plugin [...] "

Sie können den statischen Site-Editor verwenden : Mit GitLab 13.0 (Mai 2020) wird ein WYSIWYG-Panel mitgeliefert.

WYSIWYG für den statischen Site-Editor

Markdown ist eine leistungsstarke und effiziente Syntax zum Erstellen von Webinhalten, aber selbst erfahrene Autoren von Markdown-Inhalten können Schwierigkeiten haben, sich an einige der weniger häufig verwendeten Formatierungsoptionen zu erinnern oder selbst mäßig komplexe Tabellen von Grund auf neu zu schreiben.
Es gibt einige Aufgaben, die mit einem Rich-Text-Editor (WYSIWYG) besser erledigt werden können.

GitLab 13.0 bietet dem Static Site Editor eine WYSIWYG Markdown-Authoring-Erfahrung mit Formatierungsoptionen für allgemeine Formatierungsoptionen wie Überschriften, Fett, Kursiv, Links, Listen, Blockzitate und Codeblöcke.

Der WYSIWYG-Editor beseitigt auch die mühsame Aufgabe, Tabellen in Markdown zu bearbeiten, indem Sie Tabellenzeilen, -spalten und -zellen visuell so bearbeiten können, wie Sie eine Tabelle bearbeiten würden. Für diejenigen, die in Raw Markdown komfortabler schreiben möchten, gibt es sogar eine Registerkarte zum Umschalten zwischen dem WYSIWYG- und dem Nur-Text-Bearbeitungsmodus.

Siehe Dokumentation und Problem .

Auch hier würden Sie es nur zum Schreiben Ihres README: Sobald es gut aussieht, können Sie es an Ihr ursprüngliches Projekt zurückmelden.
Aber der Punkt ist: Sie brauchen kein Drittanbieter-Markdown-Vorschau-Plugin mehr.

Für diejenigen, die auf ihren iPads entwickeln möchten, mag ich Textastic. Sie können die README.md-Dateien ohne Internetverbindung bearbeiten und in der Vorschau anzeigen, nachdem Sie das Dokument aus der Cloud heruntergeladen haben.