github 프로젝트에 대한 readme를 .md 형식으로 작성 중입니다. github에 커밋하기 전에 readme.md 파일이 어떻게 보이는지 테스트 할 수있는 방법이 있습니까?
답변:
여러 가지 방법 : Mac을 사용하는 경우 Mou를 사용하십시오 .
브라우저에서 테스트하려는 경우, 당신은 시도 할 수 StackEdit을 @Aaron 또는 가리키는 아웃로, 딜 린저 이후 Notepag가 지금 내려 것 같다. 개인적으로 Dillinger는 브라우저의 로컬 데이터베이스에 모든 문서를 작동하고 저장하기 때문에 Dillinger를 사용합니다.
Atom 은 상자에서 잘 작동합니다. Markdown 파일을 열고 Ctrl + Shift + M 을 누르면 옆에있는 Markdown 미리보기 패널이 전환됩니다. HTML과 이미지도 처리합니다.
atom .하고 readme를 마우스 오른쪽 버튼으로 클릭했습니다.Markdown Preview
<details>태그 를 통해 stackit, Dillinger 또는 typora는 접을 수있는 섹션을 지원하지 않았습니다 . Atom은 부팅하기 위해 나머지보다 더 잘 보입니다.
이것은 꽤 오랫동안 신뢰할 수있는 것으로 입증되었습니다 : http://tmpvar.com/markdown.html
이것은 꽤 오래된 질문이지만 인터넷을 검색하는 동안 비틀 거리기 때문에 내 대답이 다른 사람들에게 유용 할 수 있습니다. 방금 GitHub 플레이 버드 마크 다운 : grip 을 렌더링하는 데 매우 유용한 CLI 도구를 찾았습니다 . GitHub의 API를 사용하므로 상당히 잘 렌더링됩니다.
솔직하게 grip 개발자는 이와 비슷한 질문들에 대해 더 정교하게 대답했습니다.
나는 보통 GitHub 웹 사이트에서 직접 편집하고 편집 창 바로 위의 "미리보기"를 클릭합니다.
아마도 이것은이 포스트가 작성된 이후에 추가 된 새로운 기능 일 것입니다.
xxx.md하고 코드를 붙여 넣을 수 있습니다. 파일 확장자는 .md변경 사항을 미리 볼 수 있도록합니다. 완료 한 유틸리티를 업데이트 한 다음 파일 내용을 복사하여 원본 readme.md파일에 붙여 넣습니다 .
<div align='center'><img ...></div>중앙에 배치하면 미리보기의 중앙에 이미지 가 표시되지 않고 왼쪽으로 정렬됩니다. 정확하게 보려면보기를 저장해야하므로 미리보기를 신뢰할 수 없습니다.
Visual Studio Code 에는 md 파일 변경 사항을 편집하고 미리 볼 수있는 옵션이 있습니다. VS Code는 플랫폼에 독립적이므로 Windows, Mac 및 Linux에서 작동합니다.
보기를 전환하려면 편집기에서 Ctrl + Shift + V 를 누르십시오 . 편집중인 파일을 사용 하여 미리보기를 나란히 볼 수 있으며 (Ctrl + KV) 변경 사항이 실시간으로 반영되는 것을 볼 수 있습니다.
또한...
Q : VS 코드는 GitHub Flavored Markdown을 지원합니까?
A : 아니요, VS Code는 markdown-it 라이브러리를 사용하여 CommonMark Markdown 사양을 대상으로합니다. GitHub는 CommonMark 사양으로 이동하고 있습니다.
웹에서 Dillinger를 사용하십시오 . 그것은 굉장.
로컬로 호스팅 된 HTML 파일을 사용하여 GitHub 추가 정보를 미리 봅니다.
몇 가지 기존 옵션을 살펴 보았지만 다음 요구 사항을 충족시키기 위해 직접 롤하기로 결정했습니다.
내 GitHub 리포지토리의 로컬 사본을 "github"디렉토리 아래의 형제 디렉토리에 보관합니다.
각 repo 디렉토리에는 README.md 파일이 있습니다.
.../github/
repo-a/
README.md
repo-b/
README.md
etc.
github 디렉토리는 "미리보기"HTML 파일을 포함합니다 :
.../github/
readme.html
읽어보기를 미리보기 위해 쿼리 문자열에 repo를 지정하여 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와 동일한 디렉토리에 있으면 HTTP를 통해 readme.html을 제공 할 필요조차 없습니다. 파일 시스템에서 직접 열 수 있습니다.
HTML 파일은 GitHub API 를 사용하여 README.md 파일에서 마크 다운을 렌더링합니다. 있다 속도 제한 : 글을 쓰는 시점에서 시간 당 60 개 요청 .
Windows 7의 현재 프로덕션 버전의 Chrome, IE 및 Firefox에서 작동합니다.
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>호기심 가치를 위해 원본 버전의이 레코드를 보존했습니다. 이 버전에는 현재 버전에서 해결 된 다음과 같은 문제가 있습니다.
github 디렉토리는 "미리보기"HTML 파일과 관련 파일을 포함합니다 :
.../github/
readme-preview.html
github.css
github2.css
octicons.eot
octicons.svg
octicons.woff
GitHub에서 CSS 및 octicons 글꼴 파일을 다운로드했습니다.
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)
원래 이름에서 긴 16 진수 문자열을 생략하도록 CSS 파일의 이름을 변경했습니다.
octicons 글꼴 파일의 로컬 사본을 참조하도록 github.css를 편집했습니다.
나는 GitHub 페이지의 HTML을 검사하고 readme 컨텐츠를 둘러싼 HTML 구조를 충분히 재현하여 합리적인 충실도를 제공했습니다. 예를 들어, 제한된 너비입니다.
readme 컨텐츠에 대한 GitHub CSS, octicons 글꼴 및 HTML "컨테이너"는 이동하는 대상입니다. 정기적으로 새 버전을 다운로드해야합니다.
다양한 GitHub 프로젝트에서 CSS를 사용하여 놀았습니다. 예를 들면 다음과 같습니다.
<link rel="stylesheet" type="text/css"
href="http://rawgit.com/sindresorhus/github-markdown-css/gh-pages/github-markdown.css">
그러나 결국 GitHub 자체의 CSS를 사용하기로 결정했습니다.
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>이것을 살펴볼 수도 있습니다.
에 대한 Github또는 Bitbucket테마, 온라인 편집기를 사용할 수 있습니다 mattstow , url : http://writeme.mattstow.com
웹을 검색하면 https://stackedit.io/
이전 주석에서 언급 한 Sublime Text 용 플러그인 인 MarkdownPreview 는 더 이상 ST2와 호환되지 않지만 Sublime Text 3 (2018 년 봄 이후)만 지원합니다.
깔끔한 점 : GFM ( GitHub Flavored Markdown )을 지원 하여 일반 Markdown보다 약간 더 많은 기능을 수행 할 수 있습니다. .mdGH에서 당신 의 모습이 정확히 무엇인지 알고 싶다면 이것은 관련이 있습니다 . OP가 GFM 태그를 직접 추가하지 않았기 때문에이 정보를 포함하면 솔루션을 찾는 다른 사람들도이를 인식하지 못할 수 있습니다.
온라인 상태 인 경우 GitHub API와 함께 사용할 수 있지만 인증이없는 API 호출은 제한되어 있으므로이 용도 로 개인 액세스 토큰 을 가져와야합니다. 플러그인 문서에 GFM 구문 분석에 대한 자세한 정보가 있습니다 .
SublimeText 2/3
패키지 설치 : Markdown Preview
옵션 :
Jupyter Lab을 사용하십시오 .
Jupyter Lab을 설치하려면 사용자 환경에서 다음을 입력하십시오.
pip install jupyterlab
설치 후 마크 다운 파일의 위치로 이동하여 파일을 마우스 오른쪽 버튼으로 클릭하고 "연결 프로그램"을 선택한 다음 "마크 다운 미리보기"를 클릭하십시오.
Visual Studio Code의 경우
마크 다운 미리보기 향상된 확장 기능.
ReText 는 좋은 경량 마크 다운 뷰어 / 편집기입니다.
라이브 미리보기가 포함 된 텍스트 재 작성 (소스 : 텍스트 재 작성, 더 큰 변형을 보려면 이미지 클릭)
/softwarerecs/17714/simple-markdown-viewer-for-ubuntu (다른 답변은 다른 가능성을 언급)에 답변 한 Izzy에게 감사드립니다.
markdownlivepreview를 사용하고 있습니다 :
https://markdownlivepreview.com/
매우 쉽고 간단하며 빠릅니다.
MarkdownViewerPlusPlus 는 "[...] 메모장 ++ 플러그인으로 즉석에서 렌더링되는 Markdown 파일을 볼 수 있습니다
정적 사이트 편집기를 사용할 수 있습니다 : GitLab 13.0 (2020 년 5 월) 에는 WYSIWYG 패널이 있습니다.
정적 사이트 편집 기용 WYSIWYG
Markdown은 웹 컨텐츠 제작을위한 강력하고 효율적인 구문이지만, 노련한 Markdown 컨텐츠 제작자들도 자주 사용하지 않는 서식 옵션 중 일부를 기억하거나 다소 복잡한 테이블을 처음부터 작성하는 데 어려움을 겪을 수 있습니다.
서식있는 텍스트“WYSIWYG (편집 한 내용)”를 사용하여 더 잘 수행 할 수있는 작업이 있습니다.GitLab 13.0은 WYSIWYG Markdown 저작 환경을 정적 사이트 편집기에 제공하여 헤더, 굵은 체, 이탤릭체, 링크, 목록, 블록 인용 부호 및 코드 블록과 같은 일반적인 형식 지정 옵션에 대한 형식 지정 옵션을 제공합니다.
또한 WYSIWYG 편집기는 스프레드 시트를 편집 할 때와 같은 방식으로 테이블 행, 열 및 셀을 시각적으로 편집 할 수 있도록하여 Markdown에서 테이블을 편집하는 번거로운 작업을 제거합니다. 원시 마크 다운으로보다 편안하게 작성하기 위해 WYSIWYG와 일반 텍스트 편집 모드 사이를 전환하기위한 탭도 있습니다.
다시, 당신은 단지 당신의 글을 쓸 때만 사용할 것입니다 README: 일단 좋아 보인다면, 당신은 그것을 원래의 프로젝트에 다시보고 할 수 있습니다.
그러나 요점은 더 이상 타사 마크 다운 미리보기 플러그인이 필요하지 않습니다.
