HTML dosyalarını yalnızca kaynaklarını görüntülemek yerine doğrudan GitHub'dan çalıştırabilir miyim?

300

Bir varsa .htmlbir GitHub depo dosyayı JavaScript testlerinin aa dizi çalıştırmak için, birkaç test çalıştıran doğrudan-dolayısıyla bu sayfayı görüntülemek herhangi bir yolu yoktur mesela?

Örneğin, yerel diskime repo'yu indirmeden veya klonlamadan ve orada çalıştırmadan jQuery test paketi tarafından üretilecek test sonuçlarını bir şekilde görebilir miyim ?

Bu temelde GitHub statik içerik barındırma iş koymak olacağını biliyorum, ama sonra tekrar, sadece onların MIME türünü değiştirmek text/plainzorunda text/html.

javascript html github

— Domenic
kaynak

2

Hmm ... GreaseMonkey betiği üstbilgileri değiştirebilir mi?

— Alex Howansky

1

Bu konuda kabul edilen cevabı güncelleyebilir misiniz? Şimdi bunu yapmanın bir yolu var - @ niutech'in cevabına bakın ...

— Alex Dean

1

Link'in

— Troy Alford

Olası yinelenen indirme olmadan, tarayıcıda önizlemesini görmek için normal bir hale html sayfası olarak github bir html sayfasını görmek için How?

— Michael Freidgeim

366

Raw.githack.com adresini kullanmak isteyebilirsiniz . GitHub, Bitbucket, Gitlab ve GitHub gistlerini destekler.

GitHub

Önce:

https://raw.githubusercontent.com/[user]/[repository]/[branch]/[filename.ext]

Vaka .htmluzantınızda

Sonra:

Geliştirme (kısılmış)

https://raw.githack.com/[user]/[repository]/[branch]/[filename.ext]

Üretim (CDN)

https://rawcdn.githack.com/[user]/[repository]/[branch]/[filename.ext]

Vaka .htmluzantınızda

raw.githack.com ayrıca diğer hizmetleri de destekler:

Bitbucket

Önce:

https://bitbucket.org/[user]/[repository]/raw/[branch]/[filename.ext]

Sonra:

Geliştirme (kısılmış)

https://bb.githack.com/[user]/[repository]/raw/[branch]/[filename.ext]

Üretim (CDN)

https://bbcdn.githack.com/[user]/[repository]/raw/[branch]/[filename.ext]

GitLab

Önce:

https://gitlab.com/[user]/[repository]/raw/[branch]/[filename.ext]

Sonra:

Geliştirme (kısılmış)

https://gl.githack.com/[user]/[repository]/raw/[branch]/[filename.ext]

Üretim (CDN)

https://glcdn.githack.com/[user]/[repository]/raw/[branch]/[filename.ext]

GitHub gists

Önce:

https://gist.githubusercontent.com/[user]/[gist]/raw/[revision]/[filename.ext]

Sonra:

Geliştirme (kısılmış)

https://gist.githack.com/[user]/[gist]/raw/[revision]/[filename.ext]

Üretim (CDN)

https://gistcdn.githack.com/[user]/[gist]/raw/[revision]/[filename.ext]

Güncelleme: rawgit üretilmiyor

— chmanie
kaynak

Evet, eklediğiniz için teşekkürler, uzun zaman önce bu soruyu sorduğumdan beri bu hizmete geçtim. Size kabul edilen cevabı yapalım :).

— Domenic

13

Sadece bir FYI: Bu belli sebeplerden ötürü özel depolar için işe yaramıyor gibi görünüyor.

— rfay

Javascript yüklemiyor gibi görünüyor.

— PyRulez

1

Nedense HTML sayfalarıma bir metin / html içerik türü almıyorum, bu yüzden sadece kaynağı gösterir :(

— benji 23

1

Düzenlemeden sonra bu cevap tamamen yanlış. jsDelivr bir HTML dosyasını doğrudan çalıştırmanıza izin vermez. Yalnızca HTML dosyalarının düz metnini gösterir. Yalnızca js veya css dosyaları içindir. Bir cevap arayanlar için rawgit klonu olarak raw.githack.com'u kullanın.

— Spencer Wieczorek

194

GitHub HTML Preview adında , tam olarak ne istediğinizi yapan yeni bir araç var . http://htmlpreview.github.com/?Herhangi bir HTML dosyasının URL'sinin başına gelmeniz yeterlidir , örneğin http://htmlpreview.github.com/?https://github.com/twbs/bootstrap/blob/gh-pages/2.3.2/index.html

Not: Bu araç aslında bir github.io sayfasıdır ve bir şirket olarak github ile bağlantısı yoktur.

— niutech
kaynak

2

Tam olarak bulmayı umduğum şey.

— nana

2

Özel depolarda da bu mümkün müdür?

— Björn Andersson

Çerçevelerle çalışmaz (Javadoc): htmlpreview.github.com/?https://github.com/MartinThoma/… :-(

— Martin Thoma

Chrome'da javascript aracılığıyla yüklenen göreli resimlerle çalışmaz. Cross-origin image load denied by Cross-Origin Resource Sharing policy.

— ubershmekel

3

Github havuzunun içindeki JS / CSS'ye bağlanmaya izin veren göreceli yolları düzgün bir şekilde yükler. Bu fantastik.

— Nathan Lilienthal

18

@ Niutech'in cevabını gizlemek için çok basit bir yer imi pasajı yapabilirsiniz.
Diğer tarayıcılarla benzer şekilde çalışmasına rağmen Chrome'u kullanma

Yer işareti çubuğuna sağ tıklayın
Dosya Ekle'yi tıklayın
Github HTML gibi bir ad verin
İçin URL türüjavascript:top.location="http://htmlpreview.github.com/?"+document.URL
Bir github dosya görüntüleme sayfasındayken ( raw.github.com değil ) yer işareti bağlantısını tıkladığınızda altın sizsiniz.

— mraaroncruz
kaynak

7

Kodunuzu çalıştırmak için g-sayfalarını dallayabilir veya bu uzantıyı deneyebilirsiniz (Chrome, Firefox): https://github.com/ryt/githtml

İhtiyacınız olan şey testse, JS dosyalarınızı içine gömebilirsiniz: http://jsperf.com/

— Gianluca Esposito
kaynak

6

Ratio.js projem için de aynı problemi yaşadım ve işte yaptım.

Sorun: Github.com, içerik türü / MIME öğesini düz metne ayarlayarak kaynak görüntülendiğinde dosyaların oluşturulmasını / yürütülmesini engelliyor.

Çözüm: Dosyaları bir web sayfasına aktarın.

Misal:

Çevrimiçi bir web sayfası oluşturmak için jsfiddle.net veya jsbin.com'u kullanın ve kaydedin. Github.com adresindeki dosyanıza gidin ve dosyaya doğrudan bağlantı almak için 'raw' düğmesini tıklayın. Oradan, uygun etiketi ve niteliği kullanarak dosyayı içe aktarın.

<!DOCTYPE>
<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
    </head>
    <body>
        <h1 id="qunit-header">QUnit example</h1>
        <h2 id="qunit-banner"></h2>
        <div id="qunit-testrunner-toolbar"></div>
        <h2 id="qunit-userAgent"></h2>
        <ol id="qunit-tests"></ol>
        <div id="qunit-fixture">test markup, will be hidden</div>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>  
        <script type="text/javascript" src="https://raw.github.com/LarryBattle/Ratio.js/master/src/Ratio.js"></script>  
        <script type="text/javascript" src="https://raw.github.com/LarryBattle/Ratio.js/master/tests/js/Ratio-testcases.js"></script>  
    </body>
</html>

Canlı Demo: http://jsfiddle.net/jKu4q/2/

Not: jsfiddle.net için, URL'nin showsonuna ekleyerek sonuç sayfasına doğrudan erişebilirsiniz . Bunun gibi: http://jsfiddle.net/jKu4q/2/show

Veya ... bir proje sayfası oluşturabilir ve HTML dosyalarınızı oradan oluşturabilirsiniz. Http://pages.github.com/ adresinde bir proje sayfası oluşturabilirsiniz .

Oluşturulduktan sonra bağlantıya http://*accountName*.github.com/*projectName*/ Örnek üzerinden erişebilirsiniz : http://larrybattle.github.com/Ratio.js/

— Larry Savaşı
kaynak

1

Güzel fikir tarayıcı github dosyaları yüklemek izin js keman kullanın ama neden JSFiddle "Kaynak Ekle" kullanmıyorsunuz?

— Filippo Vitale

@Filippo Harika bir fikir! Bunu bir dahaki sefere deneyeceğim.

— Larry Battle

4

İşte github'daki html sayfalarına bir CDN düğmesi ekleyecek küçük bir Greasemonkey betiği

Hedef sayfa şu biçimde olacaktır: https://cdn.rawgit.com/user/repo/master/filename.js


// ==UserScript==
// @name        cdn.rawgit.com
// @namespace   github.com
// @include     https://github.com/*/blob/*.html
// @version     1
// @grant       none
// ==/UserScript==

var buttonGroup = $(".meta .actions .button-group");
var raw = buttonGroup.find("#raw-url");
var cdn = raw.clone();
cdn.attr("id", "cdn-url");
cdn.attr("href", "https://cdn.rawgit.com" + cdn.attr("href").replace("/raw/","/") );
cdn.text("CDN");
cdn.insertBefore(raw);

— James McGuigan
kaynak

'Cdn.rawgit.com' komut dosyasının çalıştırılması başarısız oldu! $ bir işlev değil

— xiaoyu2er

4

Bunu, Requestly gibi Chrome ve Firefox uzantısıyla yapılabilecek Yanıt Başlıklarını Değiştirerek kolayca yapabilirsiniz .

Chrome ve Firefox'ta:

Yükleme Chrome için Requestly ve Firefox için Requestly
Aşağıdaki Üstbilgi Değiştirme Kurallarını ekleyin :

a) İçerik Türü :
- Değiştir
- Tepki
- Başlık: Content-Type
- Değeri: text/html
- Kaynak URL Eşleşmeleri: /raw\.githubusercontent\.com/.*\.html/
b) İçerik-Güvenlik-Politikası :
- Değiştir
- Tepki
- Başlık: Content-Security-Policy
- Değeri: default-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-eval';
- Kaynak URL Eşleşmeleri: /raw\.githubusercontent\.com/.*\.html/

— ostrokach
kaynak

Sadece bilgi için kurallarınızı Herkese Açık URL'ler olarak da paylaşabilirsiniz. Bu durumda, bu kuralı oluşturabilir ve diğer kullanıcılarla paylaşabilirsiniz. Diğer istekli kullanıcılar doğrudan içe aktarabilir ve kullanmaya başlayabilir. Şuna bir

— sachinjain024

Yukarıdaki yorumum düzenlenemedi, Bu nedenle yeni belge bağlantısı yayınlamak için başka bir yorum ekledim

— sachinjain024

3

github html ve js düzenlemek ve bir önizleme var istedim. Anında taahhüt ve tasarruf için github bunu yapmak istedim.

rawgithub.com çalıştı ama rawgithub.com gerçek zamanlı değildi (önbellek dakikada bir yenilenir).

hızlı bir şekilde kendi çözümümü geliştirdim:

Bunun için node.js çözümü: https://github.com/shimondoodkin/rawgithub

— Shimon Doodkin
kaynak

2

raw.github.com/user/repository artık orada değil

Bağlantıyı, href'i github'daki kaynak koduna bağlamak için ham kaynağa şu şekilde github bağlantısını kullanmanız gerekir:

raw.githubusercontent.com/user/repository/master/file.extension

MİSAL

<html>
...
...
<head>    
<script src="https://raw.githubusercontent.com/amiahmadtouseef/tutorialhtmlfive/master/petdecider/script.js"></script>
...
</head>
<body>
...
</html>

— Ami Ahmad Touseef
kaynak

2

Github'da açısal veya reaksiyonlu bir projeniz varsa , uygulamayı tarayıcınızda çevrimiçi çalıştırmak için https://stackblitz.com/ adresini kullanabilirsiniz .

Uygulamayı çevrimiçi görüntülemek için Github kullanıcı adınızı ve havuz adınızı girin - stackblitz.com/github/{GITHUB_USERNAME {/{REPO_NAME}

Bu, Github'a Node_Modules yüklenmemiş olsa bile çalışır

Şu anda @ açısal / cli ve create-tepki uygulaması kullanarak projeleri destekleyin. Ionic, Vue ve özel webpack yapılandırmaları için destek çok yakında!

— sujithuix
kaynak

1

Bu çözüm yalnızca krom tarayıcı için. Diğer tarayıcılardan emin değilim.

Chrome tarayıcısına "İçerik Türü Seçeneklerini Değiştir" uzantısını ekleyin.
Tarayıcıda "chrome-extension: //jnfofbopfpaoeojgieggflbpcblhfhka/options.html" URL'sini açın.
Ham dosya URL'si için kuralı ekleyin. Örneğin:
- URL Filtresi: https: ///raw/master//fileName.html
- Orijinal Türü: metin / düz
- Değiştirme Türü: metin / html
Kural olarak url'yi eklediğiniz dosya tarayıcısını açın (3. adımda).

— Vijay
kaynak