@bytesnz

Jack Farley, Computer Engineer

Articles, how-tos, blogs and knowledge forums are all great places to figure out how to solve your computer troubles. Most of them have a list of commands to run and some even show the output they got or that should expect.

Another common thing is to add a prompt to the start of all the commands. This makes it really easy to see what the commands are and it can also tell you which user to run them as - $ for a normal user and # for the super user, aka root.

The only issue with these practices is that it makes copying and pasting take a little more time - each command needs to be individually selected and copied rather than selecting them all in one.

One great and under-utilised CSS property that can solve this issue is the user-select property. It allows the developer to specify what should be selectable and what shouldn't. It can also be used to make copying stuff slightly more difficult if you are that way inclined.

The two main keyword values are none and text - none disables selection (you won't be able to select this text in the brackets), and text allows text selection as per normal.

The other values are (the explanations are in a <span> tags with the user-select to show how they work):

• contain - meaning a selection started in the element can only contain text that is in that element (hardly supported)
• all - meaning that if any text inside the element is selected, then all text in that item is selected
• auto - a slightly more complex working as documented on MDN- The used value of auto is determined as follows:
  • On the ::before and ::after pseudo elements, the used value is none
  • If the element is an editable element, the used value is contain
  • Otherwise, if the used value of user-select on the parent of this element is all, the used value is all
  • Otherwise, if the used value of user-select on the parent of this element is none, the used value is none
  • Otherwise, the used value is text

On this site, I currently use highlight.js to render syntax highlighting. The classes used for the shell highlighting can be easily augmented to incorporate better command selection by adding the user-select property to . Below is the CSS that does just that (I put the highlighted code inside <pre> and <code> tags with the language as a class on the <pre> tag)

pre.shell > code {
  user-select: none;
}

pre.shell .bash {
  user-select: text;
}

pre.shell .hljs-comment {
  user-select: none;
}

Here is a demo of without using user-select

$ echo do this
do this
$ echo then do this
then do this

and with user-select: none; on everything, but the actual commands

$ echo do this
do this
$ echo then do this
then do this

Here is the HTML of the above syntax-highlighted block for completeness.

<pre class="shell"><code>
  <span class="hljs-meta">$</span><span class="bash"> <span class="hljs-built_in">echo</span> <span class="hljs-keyword">do</span> this</span>
  do this
  <span class="hljs-meta">$</span><span class="bash"> <span class="hljs-built_in">echo</span> <span class="hljs-keyword">then</span> <span class="hljs-keyword">do</span> this</span>
  then do this
</code></pre>

A couple of issues with using it with higlight.js:

• the space after the prompt is included as part of the command, which will mean in the case of bash, it won't be added to the command history (unless the user removes the space). This can be worked around by removing the space and adding padding to the hljs-meta or the bash class.
• selection of a single command can be a little finicky as the selection only happens within the span with the command in it. Again, adding padding to the bash class makes this a little nicer.