ฉันใช้ไฟล์ HTML ที่โฮสต์ในเครื่องเพื่อดูตัวอย่าง GitHub readmes
ฉันดูตัวเลือกที่มีอยู่หลายตัว แต่ตัดสินใจที่จะม้วนตัวเองเพื่อให้เป็นไปตามข้อกำหนดต่อไปนี้:
- ไฟล์เดียว
- URL (อินทราเน็ต) โฮสต์ในพื้นที่
- ไม่จำเป็นต้องใช้ส่วนขยายเบราว์เซอร์
- ไม่มีการประมวลผลฝั่งเซิร์ฟเวอร์ที่โฮสต์ในเครื่อง (ตัวอย่างเช่นไม่มี PHP)
- เบาบาง (ตัวอย่างเช่นไม่มี jQuery)
- ความเที่ยงตรงสูง: ใช้ GitHub เพื่อแสดง Markdown และ CSS เดียวกัน
ฉันเก็บสำเนาที่เก็บ GitHub ของฉันไว้ในไดเรกทอรี sibling ภายใต้ไดเรกทอรี "github"
แต่ละไดเรกทอรี repo มีไฟล์ README.md:
.../github/
repo-a/
README.md
repo-b/
README.md
etc.
ไดเรกทอรี github มีไฟล์ "ตัวอย่าง" HTML:
.../github/
readme.html
ในการดูตัวอย่าง readme ฉันเรียกดู github / readme.html โดยระบุ repo ในสตริงการสืบค้น:
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 ใช้GitHub APIเพื่อแสดงผล Markdown ในไฟล์ README.md มีความเป็นขีด จำกัด ของอัตรา : ในขณะที่เขียนที่60 คำขอต่อชั่วโมง
ใช้งานได้กับฉันใน 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>
บันทึกย่อของนักพัฒนา
- โดยทั่วไปแล้วฉันห่อรหัสของฉันใน IIFE แต่ในกรณีนี้ฉันไม่เห็นความต้องการและคิดว่าฉันจะทำให้มันกระชับ
- ฉันไม่ได้ใส่ใจการสนับสนุน backlevel 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 เพื่อให้มีความน่าเชื่อถือที่สมเหตุสมผล ตัวอย่างเช่นความกว้างที่ จำกัด
GitHub CSS, ฟอนต์ octicons และ HTML "container" สำหรับเนื้อหา 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>
