online example codepen bootstrap alternative jsfiddle

codepen - jsfiddle example



¿Hay una función de descarga en jsFiddle? (14)

¿Hay una función de descarga en jsFiddle, por lo que puede descargar un HTML con CSS, HTML y JS en un solo archivo, para que pueda ejecutarlo sin jsFiddle con fines de depuración?

Agregar / mostrar no presenta un código fuente puro, es un ejemplo de trabajo incrustado. Para mostrarlo sin ningún script adicional, css y html, use:

http://fiddle.jshell.net/<fiddle id>/show/light/

Un ejemplo: http://fiddle.jshell.net/Ua8Cv/show/light/

En un trabajo reciente tuve que descargar una lista de urls de violín y crear una carpeta separada para cada violín que tenía un archivo html css js para cada una. He creado el siguiente programa de rastreador para esto. https://github.com/sguha-work/FiddleCrawler . Creará el nombre de la carpeta con el valor del contador y cada carpeta tendrá un html, un css, un js y un archivo de detalles. (El archivo de detalles contendrá los enlaces de recursos externos).

Encontré un artículo bajo el tema anterior. Allí podría tomar el código completo. Lo mencionaré.

Estos son los pasos mencionados en el artículo:

  1. Agregue embedded / result / al final de la URL de JSFiddle que desee obtener.

  2. Muestre el marco o el código fuente del marco: haga clic derecho en cualquier lugar de la página y vea el marco en una nueva pestaña o la fuente de inmediato (requiere Firefox).

  3. Finalmente, guarde la página en su formato preferido (MHT, HTML, TXT, etc.) y voilà!

también puede encontrarlo: https://sirusdark.wordpress.com/2014/04/10/how-to-save-and-download-jsfiddle-code/

La mejor manera es:

  1. Haga clic derecho en el panel de salida.
  2. Elija la fuente del marco de visualización, luego aparecerá todo el código.

Después de eso, puede copiar ese código y pegarlo en su computadora.

No, JSFiddle no tiene una función de descarga. Sin embargo, no es muy difícil evitarlo y guardar el contenido de un violín de todos modos.

Desde el momento en que se publicó la respuesta aceptada, JSFiddle realizó algunos cambios recientes en la interfaz de usuario y en el servidor que afectan la forma en que se debe descargar un violín. Tenga en cuenta los procedimientos actualizados a continuación.

Método de línea de comandos simple

Este método solo descarga el HTML, JavaScript y CSS del violín como un único archivo. Los recursos externos del violín no se guardan.

En la línea de comandos que se muestra a continuación, fiddle_id refiere al número de ID del violín. Para un violín con la URL " http://jsfiddle.net/<fiddle_user>/<fiddle_id> " o " http://jsfiddle.net/<fiddle_id> ", solo se necesita el fiddle_id . fiddle_user no es importante.

En el indicador de shell, ingrese la única línea de comando:

fiddleId=fiddle_id; curl "http://fiddle.jshell.net/${fiddleId}/show/" -H "Referer: http://fiddle.jshell.net/${fiddleId}/" --output "${fiddleId}.html"

El violín se guardará en un archivo llamado " fiddle_id.html ".

Método de navegador más largo

Este método descarga el violín así como sus recursos externos. Los pasos dados se basan en el uso de Google Chrome. Usar otros navegadores web debería funcionar también, pero pueden usar diferentes nombres de archivo.

  1. Seleccione el menú / enlace " Share/Embed " en la parte superior de la página de edición de JSFiddle. En el cuadro de diálogo que aparece, copie la URL que se muestra en el campo " Share full screen result ". Será de la forma " http://jsfiddle.net/<fiddle_user>/<fiddle_id>/embedded/result/ " o " http://jsfiddle.net/<fiddle_id>/embedded/result/ ".
  2. Abra una nueva ventana del navegador y pegue la URL copiada en el paso anterior. Cargue esa página.
  3. Use la función de guardar de su navegador para guardar la página y todos sus recursos en su computadora local. Para guardar todos los recursos usando Google Chrome, por ejemplo, asegúrese de seleccionar " Webpage, Complete " en el menú " Format ". Asegúrese de especificar un nombre para la página. Digamos que se llama " fiddle.html " para este ejemplo.
  4. Después de guardar la página en su computadora, tendrá el archivo " fiddle.html " y un directorio llamado " fiddle_files ". El archivo " fiddle.html " es la página de envoltura que JSFiddle usa para mostrar un encabezado con un título "Result" y otros enlaces. Cargará tu violín en un elemento iframe. En su mayor parte, este archivo se puede ignorar o incluso eliminar. El contenido HTML, JavaScript y CSS de tu violín se guardará en el directorio " fiddle_files " como un único archivo llamado " saved_resource.html ".
  5. Copie " fiddle_files/saved_resource.html " donde quiera usarlo. Si su violín incluye elementos en " External Resources ", también aparecerán en el directorio " fiddle_files ". Asegúrese de copiar esos archivos en el mismo lugar donde copió " saved_resource.html ", ya que el archivo HTML se referirá a esos recursos utilizando URL relativas.

Como se mencionó anteriormente, otros navegadores pueden nombrar los archivos de manera diferente cuando se guardan. Por ejemplo, Firefox nombra el archivo combinado HTML / JS / CSS " fiddle_files/a.html ".

Tienes que poner / mostrar una después de la URL en la que estás trabajando:

Por ejemplo:

"http://jsfiddle.net/rkw79/PagTJ/show/"

para el campo URL:

"http://jsfiddle.net/rkw79/PagTJ/"

después de eso, guarde el archivo y vaya a la carpeta show (o al nombre del archivo con el que ha guardado) debajo de esa carpeta obtendrá un archivo html show_resource.HTML. Ese es su archivo actual. Ahora ábralo en el navegador y vea el código fuente . La mejor de las suertes -------- Ujjwal Gupta

Todavía no se admite la funcionalidad de descarga ... PERO ... puede usar el jsfiddle-downloader node.

Instalación :

npm install jsfiddle-downloader -g

Para descargar un solo violín de su id :

jsfiddle-downloader -i <fiddle-id> [-o <output file>]

Para descargar un solo violín de su url :

jsfiddle-downloader -l <url> [-o <output file>] jsfiddle-downloader -l jsfiddle.net/<user>/<fiddle-id> jsfiddle-downloader -l https://jsfiddle.net/<fiddle-id> jsfiddle-downloader -l https://jsfiddle.net/<user>/<fiddle-id>/show/ -o myfiddle.html

Para descargar todos los scripts de un determinado ''usuario'' de jsFiddle.net:

jsfiddle-downloader -u <user> [-o <output file>]

Descargará todas las copias de seguridad en el directorio actual, las secuencias de comandos jsFiddles se nombrarán como:

[<output-folder>/]<id-fiddle>.html

Use http://jsfiddle.net/ / show / light /

entonces solo use la función de inspección del elemento del navegador. Obtendrás el código en la pestaña iframe. . en Chrome simplemente haga clic derecho y haga clic en editar como pestaña html. y copia el contenido html. ese es tu código real

intenta usar http://liveweave.com

Tiene la característica "Guardar" que le permite descargar el HTML (que básicamente incluye HTML, CSS y JavaScript). También tiene números de línea, que jsfiddle no.

Ctrl + S , guarda todo el violín, dentro de la carpeta de archivos está la página limpia que estás buscando

Nueva respuesta a una vieja pregunta:

Método 1:

Paso 1 : debes colocar /show después de la URL que estás trabajando:

http://jsfiddle.net/<fiddle_id>/show/

Muestra el resultado con un encabezado de resultado.

Paso 2 : haz clic con el botón derecho en el marco inferior y selecciona Ver fuente de marco . Eso es. Obtuvo el código html con enlaces JS en línea, CSS.

Solo guárdalo.

Por ejemplo: http://jsfiddle.net/YRafQ/20/show/ para el sitio http://jsfiddle.net/YRafQ/20/

Nota: Ver fuente de fotograma y no Ver fuente de página

Método 2:

Puede usar este código: view-source:http://fiddle.jshell.net/<fiddle_id>/show/light/

Por ejemplo: para mi fiddle_id: YRafQ/20

view-source:http://fiddle.jshell.net/YRafQ/20/show/light/