Я пишу readme для моего проекта github в формате .md. Есть ли способ проверить, как будет выглядеть мой файл readme.md, прежде чем отправляться в github?
Как я могу проверить, как будет выглядеть мой файл readme.md, прежде чем отправляться в github?
Ответ 1
Много способов: если вы находитесь на Mac, используйте Mou.
Если вы хотите протестировать в браузере, вы можете попробовать StackEdit, как указано @Aaron или Dillinger, поскольку Notepag, похоже, сейчас не работает. Лично я использую Dillinger, так как он просто работает и сохраняет все мои документы в локальной базе данных моего браузера.
Ответ 2
Atom прекрасно работает из коробки - просто откройте файл Markdown и нажмите Ctrl + Shift + M, чтобы переключить панель предварительного просмотра Markdown рядом с ним. Он также обрабатывает HTML и изображения.
Ответ 3
В течение некоторого времени он оказался надежным: http://tmpvar.com/markdown.html
Ответ 4
Это довольно старый вопрос, однако, поскольку я наткнулся на него во время поиска в Интернете, мой ответ может быть полезен другим. Я просто нашел очень полезный инструмент CLI для рендеринга уценки GitHub: grip. Он использует API GitHub, таким образом, делает достаточно хорошо.
Откровенно говоря, разработчик grip имеет более подробный ответ на эти очень похожие вопросы:
Ответ 5
Обычно я просто редактирую его непосредственно на веб-сайте GitHub и нажимаю "Предварительный просмотр" непосредственно над окном редактирования.
Возможно, добавлена новая функция, добавленная после этого сообщения.
Ответ 6
Visual Studio Code имеет возможность редактировать и просматривать изменения MD файла. Поскольку VS Code не зависит от платформы, это будет работать для Windows, Mac и Linux.
Для переключения между видами нажмите Ctrl + Shift + V в редакторе. Вы можете просматривать предварительный просмотр бок о бок (Ctrl + KV) с файлом, который вы редактируете, и видеть изменения, отраженные в режиме реального времени при редактировании.
Также...
Q: VS Code поддерживает GitHub Flavored Markdown?
A: Нет, VS Code предназначается для спецификации CommonMark Markdown, используя библиотеку markdown-it. GitHub движется к спецификации CommonMark.
Ответ 7
Вы можете взглянуть на это:
Ответ 8
В Интернете используйте Dillinger. Это потрясающе.
Ответ 9
Я использую локально размещенный HTML файл для предварительного просмотра GitHub readmes.
Я просмотрел несколько существующих вариантов, но решил опрокинуть свои собственные, чтобы выполнить следующие требования:
- Отдельный файл
- Локально размещенный (интрасети) URL
- Не требуется расширение браузера
- Отсутствует локально обработанная серверная обработка (например, без PHP)
- Легкий (например, без jQuery)
- Высокая точность: используйте GitHub для рендеринга Markdown и того же CSS
Я сохраняю локальные копии своих репозиториев GitHub в каталогах для сестер в каталоге "github".
Каждый каталог repo содержит файл README.md:
.../github/
repo-a/
README.md
repo-b/
README.md
etc.
Каталог github содержит HTML файл предварительного просмотра:
.../github/
readme.html
Чтобы просмотреть readme, я просматриваю github/readme.html, указав репо в строке запроса:
http://localhost/github/readme.html?repo-a
В качестве альтернативы вы можете скопировать readme.html в тот же каталог, что и README.md, и опустить строку запроса:
http://localhost/github/repo-a/readme.html
Если readme.html находится в том же каталоге, что и README.md, вам даже не нужно читать readme.html через HTTP: вы можете просто открыть его прямо из вашей файловой системы.
В файле HTML используется API GitHub для рендеринга Markdown в файле 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, но в этом случае я не видел необходимости и думал, что буду держать его кратким.
- Я не беспокоился о поддержке IE в обратном направлении
- Для краткости я пропустил код обработки ошибок (вы верите мне?!)
- Я бы приветствовал советы по программированию JavaScript.
Идеи
- Я рассматриваю возможность создания репозитория GitHub для этого HTML файла и размещения файла в ветке gh-pages, так что GitHub обслуживает его как "обычную" веб-страницу. Я бы подтащил файл, чтобы принять полный URL-адрес README (или любого другого файла Markdown) - в качестве строки запроса. Мне любопытно узнать, не будет ли размещен GitHub размещенным в GitHub ограничением на запросы API и будет ли я сталкиваться с проблемами междоменного доступа (используя запрос Ajax для получения Markdown из другого домена, чем домен, обслуживающий HTML-страницу).
Оригинальная версия (устаревшая)
Я сохранил этот рекорд исходной версии для значения любопытства. Эта версия имела следующие проблемы, которые были решены в текущей версии:
- Требуется загрузить некоторые связанные файлы.
- Он не поддерживал сброс в тот же каталог, что и README.md
- Его HTML был более хрупким; более восприимчивы к изменениям в GitHub
Каталог github содержит HTML файл предварительного просмотра и связанные файлы:
.../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, чтобы обеспечить разумную точность; например, ограниченная ширина.
CSS-шрифты GitHub, шрифт бухт и 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>
Ответ 10
Просто поиск в Интернете дает много heres one: https://stackedit.io/
Ответ 11
Для темы Github или Bitbucket можно использовать онлайн-редактор mattstow, url: http://writeme.mattstow.com
Ответ 12
Markdown Preview, плагин для Sublime Text, упомянутый в предыдущем комментарии, больше не совместим с ST2, но поддерживает только Sublime Text 3 (начиная с весны 2018 года).
Что хорошего в этом: он поддерживает GFM, GitHub Flavored Markdown, который может сделать немного больше, чем обычная Markdown. Это важно, если вы хотите точно знать, как будет выглядеть ваш .md на GH. (Включая этот бит информации, потому что OP сами не добавляли тег GFM, и другие, ищущие решение, могут и не знать об этом.)
Вы можете использовать его с GitHub API, если вы подключены к Интернету, хотя для этого вы должны получить личный токен доступа, поскольку вызовы API без аутентификации ограничены. Там больше информации о разборе GFM в плагине документации.
Ответ 13
Если вы используете Pycharm (или другую среду Jetbrains, такую как Intellij, RubyMine, PHPStorm и т.д.), есть несколько бесплатных плагинов для поддержки Markdown прямо в вашей среде IDE, которые позволяют просматривать в режиме реального времени во время редактирования. Плагин Markdown Navigator неплох. Если вы откроете файл .md в среде IDE, последние версии предложит установить поддерживающие плагины и показать вам список.
Ответ 14
SublimeText 2/3
Установить пакет: Markdown Preview
Параметры:
- Предварительный просмотр в браузере.
- Экспорт в html.
- Скопировать в буфер обмена.
Ответ 15
Используйте Jupyter Lab.
Чтобы установить Jupyter Lab, введите в своей среде следующее:
pip install jupyterlab
После установки перейдите к местоположению файла уценки, щелкните файл правой кнопкой мыши, выберите "Открыть с помощью", затем нажмите "Предварительный просмотр уценки".
Ответ 16
Для пользователей Visual Studio (не VS CODE).
Установите расширение редактора Markdown 
Таким образом, когда вы откроете файл README.md, вы увидите предварительный просмотр с правой стороны.
Ответ 17
Для кода Visual Studio я использую
Markdown Preview Улучшенное расширение.
Ответ 18
ReText - хороший легкий просмотрщик/редактор уценки.
ReText с Live Preview (источник: ReText; щелкните изображение, чтобы увеличить его)
Я нашел это благодаря Иззи, который ответил на https://softwarerecs.stackexchange.com/questions/17714/simple-markdown-viewer-for-ubuntu (другие ответы упоминают другие возможности)
Ответ 19
Я использую markdownlivepreview:
https://markdownlivepreview.com/
Это очень легко, просто и быстро.
Ответ 20
Для тех, кто хочет развиваться на своих iPad, мне нравится Textastic. Вы можете редактировать и просматривать файлы README.md без подключения к Интернету после загрузки документа из облака.