Rhyous

November 4, 2009

How to make a nice box of shell commands that show the prompt text and the command text but allows coping the shell commands without the shell prompt

Filed under: Uncategorized — J. Abram barneck @ 7:27 pm

Ok so this is a trick that involves two elements:

  1. An html box made from an html division element, that I describe here:
    How to make a nice quote field with a different background color in your WordPress blog post?
  2. A table with only one row and two columns. The first row has the prompt text and the second row has the command text. You don’t create multiple table rows. Instead, you only have one row and for line, both columns will use a html break.

Short version

<div style="width:90%;background-color:#363636;color:#ffffff;border-style:ridge;border-width:5px;padding:10px;font:courier-new">
<table><tr><td valign="top">
#
</td>
<td style="white-space: nowrap">
command 1
</td></tr></table>
</div>
# command 1

Long version

<div style="width:90%;background-color:#363636;color:#ffffff;font:courier-new;border-style:ridge;border-width:5px;padding:10px;">
<table><tr><td valign="top">
#<br />
#<br />
#<br />
#<br />
#<br />
#<br />
#<br />
#<br />
#<br />
</td>
<td style="white-space: nowrap">
command 1<br />
command 2<br />
command 3<br />
command 4<br />
command 5<br />
command 6<br />
command 7<br />
command 8<br />
</td></tr></table>
</div>

It looks like this:

#
#
#
#
#
#
#
#
#
command 1
command 2
command 3
command 4
command 5
command 6
command 7
command 8
command 1

And a good example of really using this trick with a little more complexity would be this example of logging into to FreeBSD as a user, then switching to run a shell as root and running commands.

<div style="width:500px;background-color:#363636;color:#ffffff;border-style:ridge;border-width:5px;padding:10px;">
<table><tr><td valign="top">$<td style="white-space: nowrap">su</td></tr></table>Password:
<table><tr><td valign="top">
ServerName#<br />
ServerName#<br />
ServerName#<br />
ServerName#<br />
</td><td style="white-space: nowrap">
freebsd-update fetch<br />
freebsd-update install<br />
portsnap fetch<br />
 portsnap extract<br />
</td></tr></table>
</div>
$

su

Password:

ServerName#
ServerName#
ServerName#
ServerName#
freebsd-update fetch
freebsd-update install
portsnap fetch
portsnap extract

You can easily make this green on black just by changing the color and background-color values in the division element.

<div style="width:500px;background-color:#000000;color:#00cc00;font:courier-new;border-style:ridge;border-width:5px;padding:10px;">
<table><tr><td valign="top">
$
</td><td style="white-space: nowrap">
su
</td></tr></table>

Password:

<table><tr><td valign="top">
ServerName#<br />
ServerName#<br />
ServerName#<br />
ServerName#<br />
</td><td style="white-space: nowrap">
freebsd-update fetch<br />
freebsd-update install<br />
portsnap fetch<br />
 portsnap extract<br />
</td></tr></table>
</div>

A green on black version would look like this.

$

su

Password:

ServerName#
ServerName#
ServerName#
ServerName#
freebsd-update fetch
freebsd-update install
portsnap fetch
portsnap extract
Advertisements

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: