Un plugin de WordPress para hacer demostraciones animadas de comandos de terminal: simterm

¿Harto de que ponga todas mis andanzas en terminal de Linux de forma muy pobre y sin color? ¿Que casi no se distingue la entrada de datos de la respuesta de los programas? Y eso que intento que quede todo claro, pero en ocasiones no es fácil de conseguir, y con la cantidad de ejemplos que pongo por aquí no es sostenible tener que editarlos todo el rato para que queden bien en HTML.

Bueno, todo eso se acabó. Acabo de subir una primera versión de este plugin: simterm. Más o menos, simulador de terminal, y es que dibuja una ventana allá donde queramos y simula una entrada de datos y una salida con un look and feel mucho mejor. Aquí tenéis un ejemplo:

img readme.txt simterm.php views.php

Y después de 7 años...

Sí, llevo 7 años con el blog y no se me había ocurrido nada parecido. Bueno, hace tiempo vi un plugin para esto, pero era un simple div con un css y un icono de terminal, pero creo que esto está más chulo. Y todo fue a raíz de ver que alguien a quien sigo en GitHub puso una estrella esto: Show Your Terms. A mí me encantó y busqué a ver si había algo parecido en WordPress. Yo tenía muchas ganas de empezar un plugin para WordPress desde cero (y crear un tutorial para el blog, que veréis en poco tiempo), así que aproveché este momento.

¿Cómo lo instalo en mi blog?

Si quieres utilizar SimTerm en tu blog, descárgate el plugin desde GitHub. Por el momento no está en el directorio de plugins oficiales, se encuentra en revisión y hay una larga cola de plugins por delante. Planeo habilitar una pequeña página con más información sobre el plugin, pero eso será a medida que vaya sacando tiempo.

Una vez descargado, descomprimelo dentro de wp-content/plugins, ve a la pantalla de plugins de tu instalación de WordPress y activa SimTerm.

Puedes configurar algunas cosas si entras en Ajustes > SimTerm Settings como el carácter que precede los comandos o la entrada de texto del usuario, así como el tema del terminal (claro, oscuro, regular o azul para la versión 0.10). Luego, dentro de tu post, simplemente escribe:

[simterm]
$ mysql
Welcome to the MySQL monitor. Commands end with ; or \g.
Your MySQL connection id is 454
Server version: 5.1.65-log MySQL Community Server (GPL)
> SELECT * FROM wp_options LIMIT 10,10;
+----+--------+-------+----+
| option_id | option_name | option_value | autoload |
+----+--------+-------+----+
| 11 | comments_notify | 1 | yes |
| 12 | posts_per_rss | 10 | yes |
| 13 | rss_use_excerpt | 0 | yes |
| 14 | mailserver_url | mail.example.com | yes |
| 15 | mailserver_login | login@example.com | yes |
| 16 | mailserver_pass | password | yes |
| 17 | mailserver_port | 110 | yes |
| 18 | default_category | 1 | yes |
| 19 | default_comment_status | open | yes |
| 20 | default_ping_status | open | yes |
+----+--------+-------+----+
10 rows in set (0.00 sec)
> UPDATE wp_options SET option_value=100 WHERE option_name='posts_per_rss';
Query OK, 1 row affected (0.00 sec)
Rows matched: 1 Changed: 1 Warnings: 0
[/simterm]

Y esto se verá así:

SELECT * FROM wp_options LIMIT 10,10;

+----+--------+-------+----+

+----+--------+-------+----+

| 11 | comments_notify | 1 | yes |

| 12 | posts_per_rss | 10 | yes |

| 13 | rss_use_excerpt | 0 | yes |

| 16 | mailserver_pass | password | yes |

| 17 | mailserver_port | 110 | yes |

| 18 | default_category | 1 | yes |

| 19 | default_comment_status | open | yes |

| 20 | default_ping_status | open | yes |

+----+--------+-------+----+

Configuración precisa para cada línea

Se puede configurar el color de escritura en cada línea utilizando comodines de la siguiente forma al principio de la línea:

o

##clave=valor##

para los elementos que admiten configuración. Asimismo se pueden especificar varios comodines de la siguiente manera:

##clave1,clave1=valor2,clave2##

Por ejemplo podemos escribir esto:

[simterm]
##red##$ inserto un comando
##green,delay=2000##Espere un momento por favor...
##blue,delay=1000##Respuesta del comando
##yellow##$ read -n16 VARIABLE
##red##> inserto un texto
##yellow##$ comando -complicado -con "muchos argumentos"
##underline##Respuesta muy importante
##blink##Fin de la simulación
[/simterm]

Y obtener lo siguiente:

Espere un momento por favor...

Documentación, más ejemplos y mucho más

Si quieres más información sobre este plugin ve a esta web. La iré rellenando poco a poco.

Colaborar con el plugin

Si quieres colaborar con el plugin aportando código, traducciones, solucionando problemas, etc, haz un fork en el GitHub del proyecto, trabaja en tu propio repositorio, sube los cambios y hazme un pull request. Si lo prefieres también puedes enviarme un mensaje o comentar algo, me pongo en contacto contigo y me envías los archivos, pero seguro que es más cómodo para todos de la otra forma.
Si quieres hacer sugerencias o informar de algún problema, puedes hacerlo a través de comentarios en este post, en la página de SimTerm, o en GitHub. Intento contestar todo en función del tiempo de que disponga.