Publi

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

terminales¿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:

ls
css  mutils.php        simterm-line.php      views
img  readme.txt        simterm.php           views.php
js   simterm-core.php  simterm-settings.php
touch probando
ls -latr
total 64
drwxr-xr-x 2 gaspy gaspy 4096 jul 17 02:07 img
-rw-r--r-- 1 gaspy gaspy    6 jul 17 02:34 mutils.php
-rw-r--r-- 1 gaspy gaspy 1866 jul 25 20:47 simterm-line.php
-rw-r--r-- 1 gaspy gaspy  951 jul 26 02:15 views.php
-rw-r--r-- 1 gaspy gaspy 1971 jul 26 02:18 simterm-core.php
drwxr-xr-x 2 gaspy gaspy 4096 jul 26 02:32 css
drwxr-xr-x 2 gaspy gaspy 4096 jul 26 02:32 js
drwxr-xr-x 4 gaspy gaspy 4096 jul 26 02:32 views
-rw-r--r-- 1 gaspy gaspy  300 jul 26 02:42 .gitignore
-rw-r--r-- 1 gaspy gaspy 1213 jul 26 02:59 readme.txt
drwxr-xr-x 4 gaspy gaspy 4096 jul 26 03:01 ..
-rw-r--r-- 1 gaspy gaspy 4285 jul 26 03:05 simterm-settings.php
-rw-r--r-- 1 gaspy gaspy  965 jul 26 20:37 simterm.php
drwxr-xr-x 8 gaspy gaspy 4096 jul 26 20:38 .git
-rw-r--r-- 1 gaspy gaspy    0 jul 27 01:26 probando
drwxr-xr-x 7 gaspy gaspy 4096 jul 27 01:26 .
rm probando

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í:

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

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:

##clave##

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:

inserto un comando
Espere un momento por favor…
Respuesta del comando
read -n16 VARIABLE
inserto un texto
comando -complicado --con «muchos argumentos»
Respuesta muy importante

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.

También podría interesarte....

There are 16 comments left Ir a comentario

  1. Pingback: Un plugin de WordPress para hacer demostraciones animadas de comandos de terminal: simterm | PlanetaLibre /

  2. Pingback: Demuestra tu destreza con la terminal desde tu blog – Poesía Binaria /

  3. 3rn3st0 /
    Usando Mozilla Firefox Mozilla Firefox 47.0 en Linux Linux

    ¡Esto es simplemente genial!

    1. Gaspar Fernández / Post Author
      Usando Mozilla Firefox Mozilla Firefox 48.0 en Ubuntu Linux Ubuntu Linux

      Muchas gracias 3rn3st0 !! 🙂

  4. zonaDeMarrones /
    Usando Mozilla Firefox Mozilla Firefox 70.0 en Windows Windows NT

    Hola el plugin es magnifico pero no consigo que se vea animado el texto…me sale todo de golpe…hay que verificar alguna cosa en concreto para activarlo
    https://www.zonademarrones.com/xrdp-ubuntu-hora-ntp/

  5. jsimitseo /
    Usando Google Chrome Google Chrome 120.0.0.0 en Windows Windows NT

    Your collection of the biggest web slots is a treasure trove for gaming enthusiasts. สล็อตเว็บใหญ่

  6. WilliamSEO /
    Usando Google Chrome Google Chrome 120.0.0.0 en Windows Windows NT

    Regarding this matter web page, you’ll see my best data, make sure to investigate this level of detail. pasar123 slot

  7. WilliamSEO /
    Usando Google Chrome Google Chrome 120.0.0.0 en Windows Windows NT

    Cool you compose, the data is great and fascinating, I’ll give you a connection to my site. 안전한 토토사이트

  8. WilliamSEO /
    Usando Google Chrome Google Chrome 120.0.0.0 en Windows Windows NT

    This is energizing, in any case it is imperative for you to visit this particular url: 먹튀검증업체

  9. jsimitseo /
    Usando Google Chrome Google Chrome 120.0.0.0 en Windows Windows NT

    I’ve had luck with certain brands, but it’s hit or miss. Let’s collaborate on finding the most durable options. สล็อตเว็บตรง แตกง่าย

  10. jsimitseo /
    Usando Google Chrome Google Chrome 120.0.0.0 en Windows Windows NT

    I feel extremely cheerful to have seen your site page and anticipate such a large number of all the more engaging circumstances perusing here. Much appreciated yet again for every one of the points of interest. รวมสล็อตทุกค่ายในเว็บเดียว

  11. jsimitseo /
    Usando Google Chrome Google Chrome 120.0.0.0 en Windows Windows NT

    I for one utilize them solely astounding components : you will see these people amid: 블로그

  12. jsimitseo /
    Usando Google Chrome Google Chrome 120.0.0.0 en Windows Windows NT

    I am continually hunting on the web down storys that can oblige me. There is clearly a numerous to comprehend about this. I feel you made couple of salubrious focuses in Attributes additionally. Confine occupied, amazing profession! เกมสล็อตโรม่า

  13. jsimitseo /
    Usando Google Chrome Google Chrome 120.0.0.0 en Windows Windows NT

    The author is energetic about acquiring wooden furniture on the web and his investigation about best wooden furniture has realized the plan of this article. เกมไพ่ป๊อกเด้ง

  14. jsimitseo /
    Usando Google Chrome Google Chrome 121.0.0.0 en Windows Windows NT

    Dazzling post. I Have Been examining about this issue, so a commitment of thankfulness is all together to post. Totally cool post.It ‘s incredibly exceptionally OK and Useful post.Thanks concierge doctor

  15. WilliamSEO /
    Usando Google Chrome Google Chrome 121.0.0.0 en Windows Windows NT

    I urge you to peruse this content it is fun portrayed … สล็อตเว็บตรง แตกง่าย

Leave a Reply