Как я могу проверить, что мой readme.файл md будет выглядеть так, как перед совершением в github?

Я пишу readme для моего проекта github в.формат md. Есть ли способ проверить, что мой readme.файл md будет выглядеть так, как перед совершением в github?

148
github github-flavored-markdown markdown

19 ответов

много способов: Если вы находитесь на Mac, используйте Mou.

Если вы хотите протестировать в браузере, вы можете попробовать StackEdit, как указано @Aaron или Диллинджер С Notepag вроде бы сейчас. Лично я использую Dillinger, так как он просто работает и сохраняет все мои документы в локальной базе данных моего браузера.

101

Атом прекрасно работает из коробки-просто откройте файл Markdown и нажмите Ctrl + Shift+M для переключения панели предварительного просмотра Markdown рядом с ним. Он также обрабатывает HTML и изображения.

Atom screenshot

42

Это одно доказывало надежное на довольно некоторое время:http://tmpvar.com/markdown.html

30

обычно я просто редактирую его на веб-сайте GitHub напрямую и нажимаю "предварительный просмотр" чуть выше окна редактирования.

возможно, это новая функция, которая была добавлена с момента создания этого сообщения.

22

Это довольно старый вопрос, однако, поскольку я наткнулся на него во время поиска в интернете, возможно, мой ответ полезен другим. Я только что нашел очень полезный инструмент CLI для рендеринга GitHub flavored markdown:сцепление. Он использует API GitHub, таким образом, делает довольно хорошо.

честно говоря, девелопер сцепление, есть более подробный ответ на эти и очень похожие вопросы:

21

Код Visual Studio имеет возможность редактировать и просматривать изменения файла md. Поскольку VS Code не зависит от платформы, это будет работать для Windows, Mac и Linux.

для переключения между видами нажмите Ctrl + Shift+V в Редактор. Вы можете просмотреть предварительный просмотр бок о бок (Ctrl+K V) с файлом, который вы редактируете, и видите изменения, отраженные в режиме реального времени при редактировании.

также...

Q: Поддерживает ли VS-код GitHub ароматизированную уценку?

A: нет, VS-код нацелен на спецификацию CommonMark Markdown с помощью библиотеки markdown-it. GitHub движется к спецификации CommonMark.

подробнее здесь

8

вы можете взглянуть на это:

https://github.com/kristjanjansen/md2html

4

в интернете, использовать Диллинджер. Это потрясающе.

4

Я использую локально размещенный HTML-файл для предварительного просмотра GitHub readmes.

Я посмотрел на несколько существующих вариантов, но решил свернуть свой собственный, чтобы удовлетворить следующие требования:

  • одним файлом
  • локально размещенный (интрасеть) URL
  • расширение браузера не требуется
  • нет локально размещенной серверной обработки (например, нет PHP)
  • легкий (например, без jQuery)
  • высокая точность: используйте GitHub для рендеринга уценки, и тот же CSS

Я храню локальные копии моих репозиториев GitHub в родственных каталогах в каталоге "github".

каждый каталог РЕПО содержит README.md файл:

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

каталог github содержит HTML-файл" preview":

.../github/
           readme.html

чтобы просмотреть readme, я просматриваю github / readme.html, указав РЕПО в строке запроса:

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

кроме того, вы можете скопировать читай.html в тот же каталог, что и README.md, и опустить строку запроса:

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

если readme.html находится в том же каталоге, что и README.доктор, вам даже не нужно обслуживать readme.html через HTTP: вы можете просто открыть его прямо из вашей файловой системы.

HTML-файл использует GitHub API для отображения уценки в README.файл md. Есть ограничение скорости: на момент написания статьи, 60 запросов в час.

работает для меня в текущих производственных версиях Chrome, IE и Firefox на Windows 7.

источник

вот 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>

заметки разработчика

  • обычно я заворачиваю свой код в IIFE, но в этом случае я не видел необходимости и думал, что буду кратким
  • я не беспокоился о поддержке backlevel IE
  • для краткости, я опустил код обработки ошибок (вы мне верите?!)
  • я бы приветствовал JavaScript советы по программированию

идеи

  • я рассматриваю возможность создания репозитория GitHub для этого HTML-файла и размещения файла в ветке gh-pages, чтобы GitHub служил ему "нормальной" веб-страницей. Я бы настроил файл, чтобы принять полный URL - адрес README (или любого другого файла Markdown) в качестве строки запроса. Мне любопытно посмотреть, будет ли размещаться GitHub ограничение запроса API GitHub и то, сталкиваюсь ли я с междоменными проблемами (используя запрос Ajax для получения уценки из другого домена, чем домен, обслуживающий HTML-страницу).

оригинальная версия (рекомендуется)

Я сохранил эту запись оригинальной версии для curiosity value. В этой версии были следующие проблемы, которые решаются в текущей версии:

  • для этого потребовалось несколько связанных файлов скачано
  • он не поддерживал падение в тот же каталог, что и README.md
  • его HTML был более хрупким; более восприимчивым к изменениям в GitHub

каталог github содержит HTML-файл" preview " и связанные с ним файлы:

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

Я загрузил файлы шрифтов CSS и octicons из 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)

я переименовал файлы CSS, чтобы опустить длинную строку шестнадцатеричных цифр в оригинале имена.

я редактировал github.css для ссылки на локальные копии файлов шрифтов octicons.

Я изучил HTML страницы GitHub и воспроизвел достаточно структуры HTML, окружающей содержимое readme, чтобы обеспечить разумную точность; например, ограниченную ширину.

GitHub CSS, шрифт octicons и HTML "контейнер" для содержимого readme являются движущимися целями: мне нужно будет периодически загружать новые версии.

я играл с использование CSS из различных проектов GitHub. Например:

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

но в конце концов решил использовать CSS из самого GitHub.

источник

вот 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>
3

просто поиск в интернете дает много вот один: https://stackedit.io/

2

на Github или Bitbucket темы, можно использовать онлайн редактор mattstow, url:http://writeme.mattstow.com

2

Если вы используете Pycharm (или другую JetBrains IDE, такую как Intellij, RubyMine, PHPStorm и т. д.), В вашей IDE есть несколько бесплатных плагинов для поддержки Markdown, которые позволяют просматривать в режиме реального времени во время редактирования. Плагин Markdown Navigator довольно хорош. Если вы откроете .md файл в IDE, последние версии предложит установить вспомогательные плагины и показать вам список.

1

SublimeText 2/3

установка: Markdown Preview

варианты:

  • предварительный просмотр в браузере.
  • экспорт в html.
  • копировать в буфер обмена.
1

MarkdownPreview плагин для Возвышенное Текст упомянутый в предыдущем комментарии больше не совместим с ST2, но поддерживает только Возвышенный Текст 3 (С весны 2018).

что аккуратно об этом: он поддерживает GFM,GitHub Ароматизированный Markdown, что может сделать немного больше, чем обычная уценка. Это имеет значение, если вы хотите знать, что ваш .mds будет выглядеть как на GH точно. (включая этот бит информации, потому что OP не добавил сам тег GFM, и другие, ищущие решение, могут не знать об этом.)

вы можете использовать его с API GitHub, если вы находитесь в сети, хотя вы должны получить персональный токен доступа для этой цели, потому что вызовы API без авторизации ограничены. Более подробно об разбор GFM в документации плагина.

1

использовать Лаборатория Jupyter.

чтобы установить Jupyter Lab, введите в вашей среде следующее:

pip install jupyterlab

после установки перейдите к местоположению вашего файла markdown, щелкните правой кнопкой мыши файл, выберите "Открыть с помощью", затем нажмите"Markdown Preview".

0

для пользователей Visual Studio (не VS CODE).

установить Редактор Markdown

0

для кода Visual Studio я использую

Markdown Preview расширенное расширение.

0

ReText - хороший легкий просмотрщик/редактор markdown.

ReText with Live Preview
ReText С Live Preview (источник: ReText; нажмите изображение для большего варианта)

Я нашел его благодаря Иззи, который ответил https://softwarerecs.stackexchange.com/questions/17714/simple-markdown-viewer-for-ubuntu (другие ответы упоминают другие возможности)

0

для тех, кто хочет развиваться на своих айпадах, мне нравится Textastic. Вы можете редактировать и просматривать README.md файлы без подключения к интернету, как только вы загрузили документ из облака.

-1