¿Cómo puedo probar lo que mi archivo readme.md se verá como antes de comprometerse a github? [cerrado]

Question

Yo escribo un readme para mi proyecto github en el formato .md. ¿Hay alguna manera puedo probar lo que mi archivo readme.md se verá como antes de comprometerse a github?

Answer 1

Muchas maneras:. Si estás en un Mac, utilice Mou

Si desea probar en un navegador, se podría intentar StackEdit , como ha señalado @Aaron o desde href="http://notepag.es" rel="noreferrer"> Notepag parece estar abajo ahora. Personalmente utilizo Dillinger ya que simplemente funciona y guarda todos mis documentos en la base de datos local de mi navegador.

Answer 2

Atom funciona muy bien fuera de la caja - basta con abrir el archivo de rebajas y éxito < strong> Ctrl + Shift + M para alternar el panel de vista previa de rebajas al lado de él. Se ocupa de HTML y las imágenes también.

Answer 3

Éste ha demostrado ser fiable desde hace bastante tiempo: http://tmpvar.com/markdown.html

Answer 4

Esta es una pregunta bastante viejo, sin embargo, desde que me topé con él, mientras que la búsqueda en Internet tal vez mi respuesta es útil a los demás. Acabo de encontrar una herramienta CLI muy útil para representar GitHub sabor de rebajas: agarre . Utiliza la API de GitHub, en consecuencia, vuelve bastante bien.

Francamente, el desarrollador de agarre , tiene una respuesta más elaborada en éstos preguntas muy similares:

• ¿Hay una utilidad de línea de comandos para renderizado github sabor de rebajas?
• Cuál es la mejor manera de Readme.md edición de GitHub?

Answer 5

por lo general sólo de edición en la página web de GitHub directamente y haga clic en "Vista previa" justo por encima de la ventana de edición.

Tal vez esa es una característica nueva que se ha agregado desde que se hizo este post.

Answer 6

código de Visual Studio tiene la opción de editar y archivos de previsualización md cambios. Desde Código VS es independiente de la plataforma, esto funciona para Windows, Mac y Linux.

Para cambiar entre vistas, pulse Ctrl + Shift + V en el editor. Puede ver la vista previa de lado a lado (Ctrl + K V) con el archivo que está editando y ver los cambios reflejados en tiempo real a medida que editar.

También ...

Q: ¿Soporta Código VS GitHub de sabores de rebajas

R: No, Código VS se dirige a la especificación CommonMark de rebajas mediante la reducción del precio-it biblioteca. GitHub se está moviendo hacia la especificación CommonMark.

Más detalles aquí

Answer 7

En la web, utilizar Dillinger . Es impresionante.

Answer 8

Es posible que desee echar un vistazo a esto:

https://github.com/kristjanjansen/md2html

Answer 9

Yo uso un archivo HTML alojada localmente para obtener una vista previa readmes GitHub.

Miré varias opciones existentes, pero decidí rodar mi propia para cumplir con los siguientes requisitos:

• Solo archivo
• A nivel local alojado (intranet) URL
• No se requiere extensión del navegador
• No procesamiento del lado del servidor alojado de forma local (por ejemplo, no PHP)
• ligero (por ejemplo, no jQuery)
• alta fidelidad: el uso de GitHub para hacer que el de rebajas, y la misma CSS

guardo copias locales de mis repositorios de GitHub en directorios de hermanos en un directorio "github".

Cada directorio contiene un archivo de recompra README.md:

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

El directorio github contiene la "vista previa" archivo HTML:

.../github/
           readme.html

Para previsualizar un readme, hojeo github / readme.html, especificando el repositorio en la cadena de consulta:

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

Como alternativa, puede copiar el readme.html en el mismo directorio que el README.md, y omitir la cadena de consulta:

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

Si el readme.html está en el mismo directorio que README.md, usted ni siquiera necesita para servir readme.html través de HTTP:. Sólo puede abrirlo directamente desde el sistema de archivos

El archivo HTML utiliza la API href="https://developer.github.com/v3/markdown/#render-a-markdown-document-in-raw-mode" rel="nofollow"> para hacer que el Markdown en un archivo README.md. Hay una límite de velocidad : en el momento de la escritura, 60 solicitudes por hora .

Obras para mí en las versiones actuales de producción de Chrome, IE y Firefox en Windows 7.

Fuente

Aquí está el archivo 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>

notas de Desarrollo

• Por lo general, envuelvo mi código en un IIFE, pero en este caso, no vi la necesidad, y pensé que había que mantener concisa
• No me he molestado apoyo backlevel IE
• En la concisión, he omitido el código de control de errores (¿Me crees?!)
• Me daría la bienvenida JavaScript consejos programación

Ideas

• Estoy considerando la creación de un repositorio GitHub para este archivo HTML, y poner el archivo en la rama GH-páginas, por lo que GitHub sirve como una página web "normal". Me modificar el archivo para aceptar una URL completa - del README (o cualquier otro archivo de rebajas) - como la cadena de consulta. Tengo curiosidad por ver si está organizada por GitHub sería eludir el límite de solicitud de la API GitHub, y si me chocan con problemas entre dominios (usando una petición Ajax para obtener el de rebajas de un dominio distinto del dominio al servicio de la página HTML) .

---

versión original (en desuso)

he conservado este registro de la versión original para el valor curiosidad. Esta versión tenía los siguientes problemas que se resuelven en la versión actual:

• Se requiere algunos archivos relacionados para ser descargados
• No apoyo que se dejó caer en el mismo directorio que el README.md
• Su HTML era más frágil; más susceptibles a los cambios en GitHub

El directorio github contiene el archivo HTML "vista previa" y los archivos relacionados:

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

He descargado el CSS y octicons archivos de fuentes de 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)

Me cambió el nombre a los archivos CSS omitir la larga cadena de dígitos hexadecimales en los nombres originales.

Me editado github.css para referirse a las copias locales de los archivos de fuentes octicons.

I examinó el código HTML de una página de GitHub, y reproducido lo suficiente de la estructura HTML que rodea el contenido readme para proporcionar la fidelidad razonable; por ejemplo, la anchura restringida.

El GitHub CSS, octicons de fuente y HTML "contenedor" para el contenido Léame están blancos móviles: Voy a necesitar descargar periódicamente nuevas versiones

.

Jugué con el uso de CSS de varios proyectos de GitHub. Por ejemplo:

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

pero finalmente decidió utilizar el CSS de la propia GitHub.

Fuente

Aquí está el archivo 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>

Answer 10

Sólo buscar en la web da muchas heres uno: https://stackedit.io/

Answer 11

Para Github o tema Bitbucket, podría utilizar el editor en línea mattstow , url: http: // writeme.mattstow.com

Answer 12

Para los usuarios de Visual Studio (VS no CODE).

Instalar de rebajas Editor extensión

De esta manera, cuando se abre un README.md usted tendrá una vista previa en vivo en el lado derecho.

Answer 13

de rebajas de vista previa , el plug-in para Sublime Text se ha mencionado en un comentario anterior no es compatible con ST2 más, pero sólo admite Sublime Texto 3 (desde la primavera de 2018).

Lo que es fantástico de esto: apoya GFM, GitHub de sabores de rebajas , lo que puede hacer un poco más de Markdown regular. Esto es importante si desea saber cuáles son sus .mds se vería en GH exactamente. _{^{(La inclusión de este poco de información debido a que la OP no añadir la etiqueta GFM sí mismos, y otros que buscan una solución podría no ser consciente de ello tampoco.)}}

Se puede utilizar con la API de GitHub si está en línea, a pesar de que debería obtener un token de acceso personal para este fin debido llamadas a la API sin autenticación están limitados. Hay más información sobre de análisis GFM en documentos del plugin.

Answer 14

Si está utilizando PyCharm (u otro IDE como JetBrains IntelliJ, RubyMine, PhpStorm, etc), hay varios plugins gratuitos para Markdown derecho de soporte en su IDE que permiten previsualización en tiempo real durante la edición. El plug-in de rebajas Navigator es bastante bueno. Si abre un archivo .md en el IDE, las versiones recientes ofrecerán a instalar plugins de apoyo y le mostrará la lista.

Answer 15

Sublime Text 2/3

Instalar paquete: Markdown Preview

Opciones:

• Vista previa en el navegador.
• Exportar a HTML.
• copiar al portapapeles.

Answer 16

Jupyter Lab .

Para instalar Jupyter Lab, escriba lo siguiente en su entorno:

pip install jupyterlab

Después de la instalación, vaya a la ubicación del archivo de rebajas, haga clic en el archivo, seleccione "Abrir con" y presiona "de rebajas Vista previa".

Answer 17

Para código de Visual Studio, yo uso

extensión de rebajas de vista previa mejorada.

Answer 18

Retext es una buena rebaja de peso ligero visor / editor.

^{Retext con vista previa (fuente: Retext, la imagen más grande hacer clic para una variante)}

Lo encontré gracias a Izzy que respondieron https://softwarerecs.stackexchange.com / preguntas / 17714 / simple reducción del precio-espectador-para-ubuntu (otras respuestas mencionan otras posibilidades)

Answer 19

Estoy utilizando markdownlivepreview:
https://markdownlivepreview.com/

Es muy fácil, sencillo y rápido.

Answer 20

Para aquellos que deseen desarrollar en sus iPads, me gusta Textastic. Puede editar y previsualizar los archivos README.md sin conexión a internet, una vez que haya descargado el documento de la nube.