Estou escrevendo um leia-me para o meu projeto github no formato .md. Existe uma maneira de testar como será o meu arquivo readme.md antes de confirmar no github?
Estou escrevendo um leia-me para o meu projeto github no formato .md. Existe uma maneira de testar como será o meu arquivo readme.md antes de confirmar no github?
Respostas:
De várias maneiras: se você estiver em um Mac, use Mou .
Se você quiser testar em um navegador, tente o StackEdit , como apontado por @Aaron ou Dillinger, já que o Notepag parece estar inativo agora. Pessoalmente, uso o Dillinger, pois ele simplesmente funciona e salva todos os meus documentos no banco de dados local do meu navegador.
O Atom funciona perfeitamente - basta abrir o arquivo Markdown e pressionar Ctrl + Shift + M para alternar o painel de visualização do Markdown ao lado dele. Ele lida com HTML e imagens também.
atom .
e clicar com o botão direito do mouse no leia-me>Markdown Preview
<details>
tags HTML . Atom faz e parece melhor do que o resto para inicializar.
Este se mostrou confiável por algum tempo: http://tmpvar.com/markdown.html
Esta é uma pergunta bastante antiga, no entanto, como eu me deparei com ela enquanto pesquisava na Internet, talvez minha resposta seja útil para outras pessoas. Acabei de encontrar uma ferramenta CLI muito útil para renderizar a remarcação com sabor do GitHub: grip . Ele usa a API do GitHub, tornando-o muito bem.
Francamente, o desenvolvedor do grip , tem uma resposta mais elaborada sobre essas questões muito semelhantes:
Normalmente, apenas o edito no site do GitHub diretamente e clique em "Visualizar" logo acima da janela de edição.
Talvez esse seja um novo recurso que foi adicionado desde que este post foi feito.
xxx.md
e colar seu código lá. A extensão do arquivo é .md
para que você possa visualizar suas alterações. Você atualizará o utilitário que terminar, copie o conteúdo do arquivo e cole-o sobre o readme.md
arquivo original .
<div align='center'><img ...></div>
ela não será mostrada centralizada na visualização, ela será alinhada à esquerda. Você precisa salvá-lo para vê-lo com precisão, o que torna a visualização não confiável na minha opinião.
O Visual Studio Code tem a opção de editar e visualizar alterações no arquivo md. Como o VS Code é independente de plataforma, isso funcionaria para Windows, Mac e Linux.
Para alternar entre visualizações, pressione Ctrl + Shift + V no editor. Você pode visualizar a visualização lado a lado (Ctrl + KV) com o arquivo que está editando e ver as alterações refletidas em tempo real enquanto edita.
Além disso...
P: O VS Code suporta o GitHub Flavored Markdown?
R: Não, o VS Code segmenta a especificação CommonMark Markdown usando a biblioteca markdown-it. O GitHub está se movendo em direção à especificação CommonMark.
Eu uso um arquivo HTML hospedado localmente para visualizar os readmes do GitHub.
Examinei várias opções existentes, mas decidi criar minhas próprias para atender aos seguintes requisitos:
Eu mantenho cópias locais dos meus repositórios GitHub em diretórios irmãos sob um diretório "github".
Cada diretório repo contém um arquivo README.md:
.../github/
repo-a/
README.md
repo-b/
README.md
etc.
O diretório github contém o arquivo HTML "preview":
.../github/
readme.html
Para visualizar um leia-me, eu navego no github / readme.html, especificando o repositório na string de consulta:
http://localhost/github/readme.html?repo-a
Como alternativa, você pode copiar o readme.html no mesmo diretório que o README.md e omitir a string de consulta:
http://localhost/github/repo-a/readme.html
Se o readme.html estiver no mesmo diretório que o README.md, você nem precisará fornecer o readme.html por HTTP: basta abri-lo diretamente do seu sistema de arquivos.
O arquivo HTML usa a API do GitHub para processar o Markdown em um arquivo README.md. Há um limite de taxa : no momento da redação, 60 solicitações por hora .
Funciona para mim nas versões atuais de produção do Chrome, IE e Firefox no Windows 7.
Aqui está o arquivo 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>
Eu preservei esse registro da versão original por valor de curiosidade. Esta versão teve os seguintes problemas resolvidos na versão atual:
O diretório github contém o arquivo HTML "preview" e os arquivos relacionados:
.../github/
readme-preview.html
github.css
github2.css
octicons.eot
octicons.svg
octicons.woff
Eu baixei os arquivos de fonte CSS e octicons do 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)
Renomeei os arquivos CSS para omitir a longa sequência de dígitos hexadecimais nos nomes originais.
Editei o github.css para se referir às cópias locais dos arquivos de fontes octicons.
Examinei o HTML de uma página do GitHub e reproduzi o suficiente da estrutura HTML em torno do conteúdo leia-me para fornecer uma fidelidade razoável; por exemplo, a largura restrita.
O CSS do GitHub, a fonte octicons e o "contêiner" HTML para o conteúdo leia-me estão movendo destinos: vou precisar fazer o download periodicamente de novas versões.
Eu brinquei com o uso de CSS de vários projetos do GitHub. Por exemplo:
<link rel="stylesheet" type="text/css"
href="http://rawgit.com/sindresorhus/github-markdown-css/gh-pages/github-markdown.css">
mas finalmente decidiu usar o CSS do próprio GitHub.
Aqui está o arquivo 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>
Você pode dar uma olhada neste:
Para Github
ou Bitbucket
tema, poderia usar o editor on-line mattstow , url: http://writeme.mattstow.com
Para usuários do Visual Studio (não VS CODE).
Instale a extensão Markdown Editor
Dessa forma, quando você abrir um README.md, terá uma visualização ao vivo no lado direito.
Basta pesquisar na web para ver muitos exemplos: https://stackedit.io/
Markdown Preview , o plug-in do Sublime Text mencionado em um comentário anterior não é mais compatível com o ST2, mas suporta apenas o Sublime Text 3 (desde a primavera de 2018).
O que é interessante: ele suporta GFM, GitHub Flavored Markdown , que pode fazer um pouco mais do que o Markdown normal. Isso é relevante se você quiser saber .md
exatamente como serão os seus s no GH. (Incluindo essas informações, porque o OP não adicionou a tag GFM e outras pessoas que procuram uma solução também podem não estar cientes disso).
Você pode usá-lo com a API do GitHub se estiver online, mas você deve obter um token de acesso pessoal para esse fim, porque as chamadas à API sem autenticação são limitadas. Há mais informações sobre a análise de GFM nos documentos do plug-in.
Se você estiver usando Pycharm (ou outro IDE Jetbrains como Intellij, RubyMine, PHPStorm, etc), existem vários plugins gratuitos para suporte ao Markdown diretamente no seu IDE que permitem a visualização em tempo real durante a edição. O plugin Markdown Navigator é bastante bom. Se você abrir um arquivo .md no IDE, as versões recentes oferecerão a instalação de plug-ins de suporte e a lista.
SublimeText 2/3
Instale o pacote: Markdown Preview
Opções:
Use o Jupyter Lab .
Para instalar o Jupyter Lab, digite o seguinte em seu ambiente:
pip install jupyterlab
Após a instalação, navegue até o local do seu arquivo de remarcação, clique com o botão direito do mouse no arquivo, selecione "Abrir com" e clique em "Visualização de remarcação".
Para o Visual Studio Code, eu uso
Markdown Preview Extensão aprimorada.
O ReText é um bom visualizador / editor de redução de peso leve.
ReText com visualização ao vivo (fonte: ReText; clique na imagem para obter uma variante maior)
Eu o encontrei graças a Izzy, que respondeu /softwarerecs/17714/simple-markdown-viewer-for-ubuntu (outras respostas mencionam outras possibilidades)
Estou usando o markdownlivepreview:
https://markdownlivepreview.com/
É muito fácil, simples e rápido.
O MarkdownViewerPlusPlus é um plug-in "Notepad ++" [...] para exibir um arquivo Markdown renderizado on-the-fly
Você pode usar o editor de site estático : com o GitLab 13.0 (maio de 2020) , ele vem com um painel WYSIWYG.
WYSIWYG para o editor de site estático
O Markdown é uma sintaxe poderosa e eficiente para a criação de conteúdo da Web, mas mesmo autores experientes do conteúdo do Markdown podem se esforçar para lembrar algumas das opções de formatação usadas com menos frequência ou escrever tabelas do zero com moderação complexa.
Existem alguns trabalhos melhor realizados com um rich text, editor "O que você vê é o que obtém" (WYSIWYG).O GitLab 13.0 traz para o Static Site Editor uma experiência de autoria do WYSIWYG Markdown com opções de formatação para opções comuns de formatação, como cabeçalhos, negrito, itálico, links, listas, citações de bloco e blocos de código.
O editor WYSIWYG também remove a tarefa onerosa de editar tabelas no Markdown, permitindo editar visualmente linhas, colunas e células da tabela da mesma maneira que edita uma planilha. Para aqueles que escrevem com mais facilidade no Markdown bruto, há até uma guia para alternar entre os modos de edição WYSIWYG e de texto sem formatação.
Consulte a documentação e o problema .
Novamente, você o usaria apenas para escrever o seu README
: assim que parecer bom, você poderá reportá-lo ao seu projeto original.
Mas o ponto é: você não precisa mais de nenhum plugin de visualização de descontos de terceiros.