El Blog de Machinarium021

Software libre y tecnología en general.



Incrustando una terminal Node.js dentro de HTML5 con Tonic

Tonic-Nodejs

Node.js es un entorno de ejecución increible, es altamente expandible gracias a la gran cantidad de librerías disponibles desde npmjs.com. Aunque es emocionante desarrollar para esta plataforma, quizás sea algo complicado instalarlo la primera vez o quizás ya sabes hacer Node.js y quieres demostrar ejemplos en vivo sin salir del navegador, es allí donde entra Tonic.

Tonic es un REPL que nos da la oportunidad de correr código Node.js y usar cualquier paquete de npm sin la necesidad de instalar nada en nuestro equipo, lo cual es interesante si queremos extender las posibilidades de un simple resaltado de texto. Para muestra un ejemplo creando texto en Markdown con Marked.

var marked = require("marked"); marked("# Este es un ejemplo usando Marked \n este texto está en *italic* y este en **bold**")

Recibiendo un número aleatorio entre 0 y 5 utilizando lodash.

var _ = require("lodash"); _.random(0,5);

Transformando una plantilla Less a CSS

var less = require("less"); less.render('.foo {width: (1 + 1)}', function (e, output){ console.log(output.css); });

Para insertar Tonic en tu sitio web, basta con incluir su script tag y señalar el elemento en HTML que incluirá tu código de la siguiente forma:




  
function foo() { return "hello world" } foo();

Claramente se puede observar que el atributo data-element-id indica el id del elemento que contiene nuestro código, si además queremos hacer que nuestros ejemplos sean de solo lectura, entonces debemos agregar data-read-only a nuestro script tag.

Puedes ver más información en el sitio web de sus desarrolladores y el manual de ayuda.

Blog Logo

Richard Armuelles

Frontend, Mozilla Reps, Blogger, Speaker & Free Software Evangelist

  • Panama
comments powered by Disqus