codeblockjs

Codeblock.js: edite y ejecute JavaScript directamente desde su navegador

Hablar sobre la introducción de marcos de JavaScript, bibliotecas o simplemente tutoriales paso a paso, siempre es útil, si puede respaldar todas sus palabras con un puñado de ejemplos en vivo adecuados. Entonces, en lugar de simplemente publicar fragmentos de código muerto, ¿no sería mucho mejor si pudiera incrustar JavaScript de manera que sus lectores puedan editarlo y ejecutarlo, sin obligarlos a descargar ejemplos y qué no primero? Eso es lo que ofrece Codeblock.js…


Codeblock.js en casa

Codeblock.js convierte cualquier elemento dado que contenga código fuente en bloques de código editables y listos para ejecutar, todo lo cual se puede hacer directamente dentro del navegador. Codeblock.js se basa en jQuery y Ace-Editor. Así que asegúrese de incrustarlos todos en el encabezado de su documento. Luego, convierta cualquier elemento en un editor de JavaScript:

€("#thisissourcecode").codeblock();

El elemento podría ser, por ejemplo, un simple div. Con solo presionar un botón, se ejecuta el código contenido. De esa manera, tus tutoriales se vuelven mucho más animados. El entorno de capacitación se encuentra justo dentro del contenido de su tutorial.

Resaltado de sintaxis, números de línea e informe de errores

Codeblock crea un editor de JavaScript completo con los botones «Ejecutar» y «Restablecer» para permitirle ejecutar el script o restablecerlo al contenido del editor original. El resaltado de sintaxis integrado acompañado de números de línea se preocupa por una presentación clara y comprensible.

codeblockjs_editor
Editor Codeblock.js

El autocompletado se asegura de que una vez abiertos los corchetes y las comillas se cierren correctamente. Un informe de error en el extremo inferior del editor le indica si su código fuente es válido o tiene errores.

Opciones de configuración

Codeblock.js es muy personalizable. Cambie el aspecto, la funcionalidad y la redacción a su gusto. Si no quiere, no muestre la consola, no oculte los botones ni suelte los números de línea.

€("#thisissourcecode").codeblock({
  editable: true,
  consoleText: "ExampleSourceCodet",
  runButtonText: "Let me run",
  console: true,
  resetable: true,
  runnable: true,
  lineNumbers: true
});

Si lo desea, puede incluso cambiar el aspecto del editor. La consola y el botón de ejecución podrían equiparse con clases separadas, que luego estarían esperando a su genio del diseño. No conozco una forma más sencilla y cómoda de mostrar el código JavaScript de manera significativa dentro de un artículo.

enlaces relacionados

(dpe)

#Codeblockjs #edite #ejecute #JavaScript #directamente #desde #navegador

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.