javascript - una - ver html en github

¿Puedo ejecutar archivos HTML directamente desde GitHub, en lugar de solo ver su fuente?

Question

Si tengo un archivo .html en un repositorio de GitHub, por ejemplo, para ejecutar un conjunto de pruebas de JavaScript, ¿hay alguna forma en que pueda ver esa página directamente, ejecutando así las pruebas?

Por ejemplo, ¿podría realmente ver los resultados de las pruebas que se producirían con la suite de pruebas jQuery , sin descargar o clonar el repositorio en mi disco local y ejecutarlos allí?

Sé que esto básicamente pondría a GitHub en el negocio de alojamiento de contenido estático, pero nuevamente, solo tienen que cambiar su tipo mime de text/plain a text/html .

Answer 1

A cuestas a la respuesta de @ niutech, puedes hacer un fragmento de marcador muy simple.
Usando Chrome, aunque funciona de manera similar con otros navegadores

1. Haz clic derecho en tu barra de marcadores
2. Haga clic en Agregar archivo
3. Nombre algo como Github HTML
4. Para el tipo de URL javascript:top.location="http://htmlpreview.github.com/?"+document.URL
5. Cuando estés en una página de visualización de archivos github ( no en raw.github.com ), haz clic en el enlace del marcador y estarás dorado.

Answer 2

Aquí hay una pequeña secuencia de comandos de Greasemonkey que agregará un botón CDN a las páginas html en github

La página de destino tendrá el formato: 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);

Answer 3

Esta solución solo para el navegador chrome. No estoy seguro de otro navegador.

1. Agregue la extensión "Modificar las opciones de tipo de contenido" en el navegador Chrome.
2. Abra "chrome-extension: //jnfofbopfpaoeojgieggflbpcblhfhka/options.html" url en el navegador.
3. Agregue la regla para la url del archivo en bruto. Por ejemplo:
   • Filtro de URL: https: ///raw/master//fileName.html
   • Tipo de original: texto / plano
   • Tipo de reemplazo: texto / html
4. Abra el explorador de archivos que agregó url en la regla (en el paso 3).

Answer 4

Hay una nueva herramienta llamada htmlpreview.github.com , que hace exactamente lo que quieres. ¿Solo tienes que anteponer http://htmlpreview.github.com/? a la URL de cualquier archivo HTML, por ejemplo, http://htmlpreview.github.com/?https://github.com/twbs/bootstrap/blob/gh-pages/2.3.2/index.html

Nota: esta herramienta es en realidad una página github.io y no está afiliada a github como compañía.

Answer 5

Puede dividir las páginas gh para ejecutar su código o probar esta extensión (Chrome, Firefox): https://github.com/ryt/githtml

Si lo que necesita son pruebas, puede incrustar sus archivos JS en: http://jsperf.com/

Answer 6

Puede hacerlo fácilmente modificando los encabezados de respuesta, lo que se puede hacer con Chrome y la extensión de Firefox como Requestly .

En Chrome y Firefox:

1. Instale Requestly y Requestly para Firefox

2. Agregue las siguientes reglas de modificación de encabezados :

   a) Tipo de contenido :

   • Modificar
   • Respuesta
   • Encabezado: Content-Type
   • Valor: text/html
   • Coincidencias de URL de origen: /raw/.githubusercontent/.com/.*/.html/

   
   

   b) Política de seguridad del contenido :

   • Modificar
   • Respuesta
   • Encabezado: Content-Security-Policy
   • Valor: default-src ''none''; style-src ''self'' ''unsafe-inline''; img-src ''self'' data:; script-src * ''unsafe-eval''; default-src ''none''; style-src ''self'' ''unsafe-inline''; img-src ''self'' data:; script-src * ''unsafe-eval'';
   • Coincidencias de URL de origen: /raw/.githubusercontent/.com/.*/.html/

Answer 7

Quería editar html y js en github y tener una vista previa. Quería hacerlo en github para tener confirmaciones instantáneas y guardar.

Intenté rawgithub.com pero rawgithub.com no fue en tiempo real (se actualiza la caché una vez por minuto).

así que rápidamente desarrollé mi propia solución:

Solución de node.js para esto: https://github.com/shimondoodkin/rawgithub

Answer 8

Si tiene un proyecto angular o reactivo en github, puede usar https://stackblitz.com/ para ejecutar la aplicación en línea en su navegador.

Ingrese su nombre de usuario y repositorio de Github para ver la aplicación en línea: stackblitz.com/github/{GITHUB_USERNAME}/{REPO_NAME}

Esto funciona incluso sin Node_Modules subidos a Github

Actualmente apoyamos proyectos usando @ angular / cli y create-react-app. ¡El soporte para configuraciones de paquetes web iónicos, Vue y personalizados vendrá pronto!

Answer 9

Tuve el mismo problema para mi proyecto Ratio.js y esto es lo que hice.

Problema: Github.com evita que los archivos se rendericen / ejecuten cuando se ve la fuente configurando el tipo de contenido / MIME a texto simple.

Solución: Haz que una página web importe los archivos.

Ejemplo:

Utilice jsfiddle.net o jsbin.com para crear una página web en línea y luego guárdela . Navegue a su archivo en Github.com y haga clic en el botón ''sin procesar'' para obtener el enlace directo al archivo. Desde allí, importe el archivo utilizando la etiqueta y el atributo apropiados.

<!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>

Demostración en vivo: http://jsfiddle.net/jKu4q/2/

Nota: Nota para jsfiddle.net puede obtener acceso directo a la página de resultados agregando show al final de la url. Así es: http://jsfiddle.net/jKu4q/2/show

O ... puedes crear una página de proyecto y representar tus archivos HTML desde allí. Puede crear una página de proyecto en http://pages.github.com/ .

Una vez creado, puede acceder al enlace a través de http://*accountName*.github.com/*projectName*/ Ejemplo: http://larrybattle.github.com/Ratio.js/

Answer 10

Una alternativa a http://htmlpreview.github.com sería http://rawgithub.com . Proporciona una forma más conveniente de previsualizar tus archivos.

Actualización : el sitio ha sido renombrado a http://rawgit.com

Antes de:

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

En tu caso la extensión .html

Después:

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

En tu caso la extensión .html

Ahora parece que también se puede usar CDN en la producción, lo que es bastante bueno:

https://cdn.rawgit.com/[user]/[repository]/[branch]/[filename.ext]

También puedes servir gists.

Antes de:

https://gist.github.com/[user]/[gist] 

Después:

https://rawgit.com/[user]/[gist]/raw/

CDN:

https://cdn.rawgit.com/[user]/[gist]/raw/

Answer 11

raw.github.com/user/repository ya no está allí

Para enlazar, href al código fuente en github, tienes que usar el enlace github a la fuente en bruto de esta manera:

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

EJEMPLO

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