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

Question

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

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

19 148

github r-markdown github-flavored-markdown

19 ответов:

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

42

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

30

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

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

22

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

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

есть ли утилита командной строки для рендеринга github ароматизированная уценка?

какой самый лучший способ для редактирования файл README на GitHub по.МД?

21

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

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

также...

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

A: нет, VS Code нацелен на спецификацию 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.md-тебе даже не нужно обслуживать readme.html через HTTP: вы можете просто открыть его непосредственно из вашей файловой системы.

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

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

источник

вот 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>
заметки разработчика

как правило, я заворачиваю свой код в 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-файл-предварительный просмотр.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>

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".

0

для пользователей Visual Studio (не против кода).

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

0

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

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

0

ReText это хороший легкий уценки просмотра / редактора.

^{ReText С живым просмотром (источник: ReText; нажмите изображение для большего варианта)}

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

0

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

-1

three · Accepted Answer · 2017-08-13 20:33:24

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

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