Saya menggunakan file HTML yang di-host secara lokal untuk melihat pratinjau readit GitHub.
Saya melihat beberapa opsi yang ada, tetapi memutuskan untuk roll sendiri untuk memenuhi persyaratan berikut:
- File tunggal
- URL yang diinangi secara lokal (intranet)
- Tidak diperlukan ekstensi browser
- Tidak ada pemrosesan sisi server yang di-host secara lokal (misalnya, tidak ada PHP)
- Ringan (misalnya, tanpa jQuery)
- Kesetiaan tinggi: gunakan GitHub untuk membuat penurunan harga, dan CSS yang sama
Saya menyimpan salinan lokal dari repositori GitHub saya di direktori saudara di bawah direktori "github".
Setiap direktori repo berisi file README.md:
.../github/
repo-a/
README.md
repo-b/
README.md
etc.
Direktori github berisi file HTML "pratinjau":
.../github/
readme.html
Untuk mempratinjau readme, saya menjelajahi github / readme.html, menentukan repo dalam string kueri:
http://localhost/github/readme.html?repo-a
Atau, Anda dapat menyalin readme.html ke direktori yang sama dengan README.md, dan menghilangkan string kueri:
http://localhost/github/repo-a/readme.html
Jika readme.html berada di direktori yang sama dengan README.md, Anda bahkan tidak perlu menayangkan readme.html melalui HTTP: Anda bisa membukanya langsung dari sistem file Anda.
File HTML menggunakan API GitHub untuk merender Markdown dalam file README.md. Ada batasan kurs : pada saat penulisan, 60 permintaan per jam .
Bekerja untuk saya dalam versi produksi Chrome, IE, dan Firefox saat ini pada Windows 7.
Sumber
Ini file 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>
Catatan pengembang
- Biasanya, saya membungkus kode saya dalam IIFE, tetapi dalam kasus ini, saya tidak melihat kebutuhan, dan berpikir saya akan menyimpannya secara ringkas
- Saya belum peduli mendukung backlevel IE
- Untuk keringkasan, saya telah menghilangkan kode penanganan kesalahan (apakah Anda percaya padaku ?!)
- Saya akan menyambut tips pemrograman JavaScript
Ide ide
- Saya sedang mempertimbangkan membuat repositori GitHub untuk file HTML ini, dan meletakkan file di cabang gh-pages, sehingga GitHub menyajikannya sebagai halaman web "normal". Saya akan mengubah file untuk menerima URL lengkap - dari README (atau file Penurunan harga lainnya) - sebagai string kueri. Saya ingin tahu apakah di-host oleh GitHub akan mengesampingkan batas permintaan API GitHub, dan apakah saya bertabrakan dengan masalah lintas-domain (menggunakan permintaan Ajax untuk mendapatkan Markdown dari domain yang berbeda dari domain yang melayani halaman HTML) .
Versi asli (usang)
Saya telah menyimpan catatan versi asli ini untuk nilai rasa ingin tahu. Versi ini memiliki masalah berikut yang diselesaikan di versi saat ini:
- Untuk itu diperlukan beberapa file terkait untuk diunduh
- Itu tidak mendukung dijatuhkan ke direktori yang sama dengan README.md
- HTML-nya lebih rapuh; lebih rentan terhadap perubahan di GitHub
Direktori github berisi file HTML "pratinjau" dan file terkait:
.../github/
readme-preview.html
github.css
github2.css
octicons.eot
octicons.svg
octicons.woff
Saya mengunduh file font CSS dan octicons dari 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)
Saya mengganti nama file CSS untuk menghilangkan string panjang digit hex dalam nama aslinya.
Saya mengedit github.css untuk merujuk ke salinan lokal dari file font octicons.
Saya memeriksa HTML halaman GitHub, dan cukup mereproduksi struktur HTML yang mengelilingi konten readme untuk memberikan kesetiaan yang wajar; misalnya lebar dibatasi.
GitHub CSS, font octicons, dan "wadah" HTML untuk konten readme adalah target yang bergerak: Saya perlu mengunduh versi baru secara berkala.
Saya bermain-main dengan menggunakan CSS dari berbagai proyek GitHub. Sebagai contoh:
<link rel="stylesheet" type="text/css"
href="http://rawgit.com/sindresorhus/github-markdown-css/gh-pages/github-markdown.css">
tetapi akhirnya memutuskan untuk menggunakan CSS dari GitHub itu sendiri.
Sumber
Ini file 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>
