SimTerm: Show the world how to use a terminal from your WordPress blog

This is a simple plugin to show everybody how you use a terminal. Show us how you type commands and how they produce a response, the same way you do it in a computer. This is very useful if you write tutorials where someone has to write console commands, this is for you. Just show that in a proper and colorful way and make everybody understand how you do it.

Let’s see an example:

wget -O temperature.csv “http://longurltodownloadcsvwithtemperatures”
--2016-08-03 21:19:42--  http://longurltodownloadcsvwithtemperatures
Resolviendo www.aemet.es (www.aemet.es)… 88.221.53.19, 88.221.52.249
Conectando con www.aemet.es (www.aemet.es)[88.221.53.19]:80… conectado.
Petición HTTP enviada, esperando respuesta… 200 OK
Longitud: 8019 (7,8K) [text/csv]
Grabando a: “temperature.csv”
100%[=====================>] 8.019       --.-K/s   en 0,001s
2016-08-03 21:19:42 (10,5 MB/s) -- “temperature.csv” guardado [8019/8019]
iconv -f iso8859-1 -t utf8 temperature.csv > temperature_utf8.csv
grep -A2 ‘^”Málaga, Centro’ temperature_utf8.csv
”Málaga, Centro Meteorológico”,”Málaga”,”28.0″,”12″
”Málaga, Puerto”,”Málaga”,”26.2″,”6″,”Sudeste”,”13″
”Málaga Aeropuerto”,”Málaga”,”27.6″,”19″,”Sudeste”,”28″
grep -A2 ‘^”Málaga, Centro’ temperature_utf8.csv | awk -v FS='”,”|^”|”$’ ‘{print “City: “$2″\nState:”$3″\nTemperature:”$4″\n”}’
City: Málaga, Centro Meteorológico
State:Málaga
Temperature:28.0
City: Málaga, Puerto
State:Málaga
Temperature:26.2
City: Málaga Aeropuerto
State:Málaga
Temperature:27.6

That’s it you just enter a shortcode and it makes the magic.

  • Intro
  • Features
  • Basic usage
  • How to install
  • Collaborate

Intro

This plugin is based on the fabulous Javascript library Show Your Terms by Kande Bonfim. The basic idea was to make tutorials for my personal blog a bit more attractive. Because sometimes it’s so confusing when showing user input and commnads and program outputs the same way.
I decided to make a first serious and published WordPress plugin-

Features

It can show a terminal window on your blog with some cool features:

  • You can enter data in an easy way without having to enter HTML codes or something complex, just your input and output
  • It fixes some WordPress characters like double or triple dash and HTML spaces to make your terminal look right
  • You can choose the window title and the window theme
  • There are several speeds selected automatically (by the context) and configurable:
    • typing speed: that’s the delay between letters in commands and user input
    • normal delay: Delay between lines
    • response delay: Delay between response lines. The response of a command usually appears at the same time or a very small delay
    • last line delay: Animation replays, so there’s a high delay in the end allowing your visitors to take notes.
  • You can customize line colors, delays and typing speed for every line
  • No complications, simple to write simulations.
  • Configuration languages: English, Spanish

Basic usage

Three basic rules:

  • Commands are prepended by $ or # (by default, it’s configurable)
  • User input is prepended by > (also configurable)
  • Lines not starting with $, # or > are treated like program output.

So,

[simterm]
$ this is a command
Please enter your name:
> John Doe
Hello John Doe, this is the response
of this fantastic command.
[/simterm]

will be played as:

this is a command
Please enter your name:
John Doe
Hello John Doe, this is the response
of this fantastic command.

You also can add some inline commands surrounded by ##COMMAND##. Here’s a list of supported commands:

  • color=%color% : displays current line in color. color can be red, green, blue, grey, yellow.
  • red: displays current line in red. The same as color=red
  • green: displays current line in green. The same as color=green
  • blue: displays current line in blue. The same as color=blue
  • grey: displays current line in grey. The same as color=grey
  • yellow: displays current line in yellow. The same as color=yellow
  • underline: underlines current line.
  • blink: blinks current line.
  • active: displays the cursor at the end of the line.
  • speed=%milliseconds%: sets typing speed. milliseconds is a number of ms of delay between one letter and the next.
  • delay=%milliseconds%: sets the delay between current line and the next.

How to install

Installation is very very easy. Just search for “simterm” in your WordPress add plugin section and install. Default options are ok, so you don’t have to waste time configuring the plugin.
If your WordPress installation doesn’t allow you to install the plugin this way. Download it from:

Unpack the file and copy the contents to your wp-contents/plugins/ directory. Then go to WordPress plugins settings and activate it.

Collaborate

I appreciate very much any kind of help to this project here are some suggestions:

  • Install this plugin in your WordPress blog, and use it. I know it’s not something everyone wants but it could be useful for you (if you came here).
  • Share this plugin with anyone who may consider it interesting.
  • Report errors, suggestions, comments, anything from this site, GitHub, WordPress.org, Facebook, Twitter, or my personal blog.
  • Translations. If you know English or Spanish and any other language. Feel free to translate it. WordPress has a great system to send me translations, but you also can download the program, translate messages and send them to me.
  • Contribute with code. You can fork on GitHub, or send me your stuff.
  • Images. I know they’re not good, and I’m sure anyone can make them better. Send me images.
  • Send me examples! It would be great to have lot’s of examples! And they will be published here.
  • A vote on WordPress.org
  • Money. I’m not stone made! If you want to buy me a coffee or helping me pay servers, you can click Paypal button in the sidebar, or click here

5 thoughts on “SimTerm: Show the world how to use a terminal from your WordPress blog

  1. Pingback: Version 0.2.4 of SimTerm published - Gaspar FernandezGaspar Fernandez

    • Hello, you can select different themes looking at the settings page. Choosing dark, light, blue, or Ubuntu (if you update to 0.3.0) but you can’t choose colors right now.

      Of course, you can modify the source to include a new theme. If you do it, would you please send it to me? So I can include it in a newer release.

      I want to create a theming system but in a future release.

    • You can change the terminal style in plugin options or use [simterm theme="default/blue/regular/dark"] when creating your content.

Leave a Reply

Your email address will not be published. Required fields are marked *