tag - ¿Cómo puedo probar cómo se verá mi archivo readme.md antes de comprometerme con github?

readme md syntax (15)

Estoy escribiendo un archivo Léame para mi proyecto github en el formato .md. ¿Hay alguna manera de probar cómo se verá mi archivo readme.md antes de comprometerme con github?

De muchas maneras: si estás en una Mac, usa Mou .

Si quieres probar en un navegador, puedes probar StackEdit , como señala @ Aaron o Dillinger ya que Notepag parece estar inactivo ahora. Personalmente utilizo Dillinger ya que solo funciona y guarda todos mis documentos en la base de datos local de mi navegador.

En la web, usa Dillinger . Es impresionante.

Es posible que desee echar un vistazo a este:

https://github.com/kristjanjansen/md2html

Esta es una pregunta muy antigua, sin embargo, dado que me encontré con ella mientras buscaba en Internet, tal vez mi respuesta sea útil para otros. Acabo de encontrar una herramienta CLI muy útil para representar el descuento con sabor a GitHub: grip . Utiliza la API de GitHub, por lo que rinde bastante bien.

Francamente, el desarrollador de grip , tiene una respuesta más elaborada sobre estas preguntas muy similares:

Este ha demostrado ser confiable por bastante tiempo: http://tmpvar.com/markdown.html

Normalmente solo lo edito en el sitio web de GitHub directamente y hago clic en "Vista previa" justo encima de la ventana de edición.

Tal vez esa es una nueva característica que se ha agregado desde que se realizó esta publicación.

Para aquellos que desean desarrollar en sus iPads, me gusta Textastic. Puede editar y obtener una vista previa de los archivos README.md sin conexión a Internet, una vez que haya descargado el documento desde la nube.

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

Si está utilizando Pycharm (u otro IDE de Jetbrains como Intellij, RubyMine, PHPStorm, etc.), hay múltiples complementos gratuitos para compatibilidad con Markdown directamente en su IDE que permiten la vista previa en tiempo real mientras se edita. El complemento Markdown Navigator es bastante bueno. Si abre un archivo .md en el IDE, las versiones recientes ofrecerán la instalación de complementos compatibles y le mostrarán la lista.

Simplemente al buscar en la web se da a muchos here uno: StackEdit

Usa Jupyter Lab .

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

pip install jupyterlab

Después de la instalación, busque la ubicación de su archivo de marcado, haga clic con el botón derecho en el archivo, seleccione "Abrir con" y luego haga clic en "Vista previa de reducción".

Utilizo un archivo HTML alojado localmente para obtener una vista previa de las lecturas de GitHub.

Miré varias opciones existentes, pero decidí hacer las mías para cumplir con los siguientes requisitos:

Fila india
URL alojada localmente (intranet)
No se requiere extensión de navegador
Sin procesamiento del lado del servidor alojado localmente (por ejemplo, sin PHP)
Ligero (por ejemplo, no jQuery)
Alta fidelidad: use GitHub para renderizar el Markdown y el mismo CSS

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

Cada directorio repo contiene un archivo README.md:

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

El directorio github contiene el archivo HTML "preview":

.../github/ readme.html

Para previsualizar un archivo Léame, navego por github / readme.html, especificando el repositorio en la cadena de consulta:

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

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

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

Si el archivo readme.html está en el mismo directorio que README.md, ni siquiera es necesario que muestre readme.html a través de HTTP: puede abrirlo directamente desde su sistema de archivos.

El archivo HTML usa la API de GitHub para renderizar el Markdown en un archivo README.md. Hay un límite de tarifa : al momento de escribir, 60 solicitudes por hora .

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

Fuente

Aquí está el archivo HTML (readme.html):

<!DOCTYPE html>  <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 del desarrollador

Normalmente, envuelvo mi código en un IIFE, pero en este caso, no vi la necesidad, y pensé que lo mantendría conciso
No me he molestado en apoyar el nivel de backevel IE
Para ser conciso, he omitido el código de manejo de errores (¿me cree ?!)
Me gustaría recibir consejos sobre programación de JavaScript

Ideas

Estoy considerando crear un repositorio GitHub para este archivo HTML y colocar el archivo en la rama gh-pages, para que GitHub lo sirva como una página web "normal". Me gustaría modificar el archivo para aceptar una URL completa - del archivo README (o cualquier otro archivo Markdown) - como cadena de consulta. Tengo curiosidad por ver si ser alojado por GitHub sostendría el límite de solicitud de la API de GitHub, y si me encuentro con problemas entre dominios (usando una solicitud de Ajax para obtener el Marcado de un dominio diferente al que sirve la página HTML) .

Versión original (en desuso)

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

Se requirieron algunos archivos relacionados para ser descargados
No admitía que se lo incluyera en el mismo directorio que README.md
Su HTML era más frágil; más susceptible a los cambios en GitHub

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

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

Descargué los archivos de fuentes CSS y Octicons 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)

Cambié el nombre de los archivos CSS para omitir la larga cadena de dígitos hexadecimales en los nombres originales.

Edité github.css para referirme a las copias locales de los archivos de fuentes de Octicons.

Examiné el código HTML de una página de GitHub y reproduje lo suficiente de la estructura HTML que rodea el contenido del archivo Léame para proporcionar una fidelidad razonable; por ejemplo, el ancho restringido.

El GitHub CSS, la fuente de Octicons y el "contenedor" HTML para el contenido del archivo Léame son objetivos en movimiento: tendré que 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ó usar el CSS de GitHub.

Fuente

Aquí está el archivo HTML (readme-preview.html):

<!DOCTYPE html>  <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"/>  <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>  <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>

Atom funciona muy bien, solo abre el archivo Markdown y presiona Ctrl + Shift + M para alternar el panel de vista previa de Markdown junto a él. También maneja HTML e imágenes.

SublimeText 2/3

Instalar paquete: Markdown Preview

Opciones:

Vista previa en el navegador.
Exportar a html
Copiar al portapapeles.

Visual Studio Code tiene la opción de editar y obtener una vista previa de los cambios del archivo md. Como VS Code es independiente de la plataforma, esto funcionaría para Windows, Mac y Linux.

Para cambiar de vista, presione Ctrl + Shift + V en el editor. Puede ver la vista previa una al lado de la otra (Ctrl + KV) con el archivo que está editando y ver los cambios reflejados en tiempo real mientras edita.

También...

P: ¿Admite VS Code Markdown con sabor a GitHub?
R: No, el Código VS apunta a la especificación CommonMark Markdown utilizando la biblioteca markdown-it. GitHub se está moviendo hacia la especificación CommonMark.

Más detalles aquí