Using 'console' format for installation directions

[ericfranz]

1. Use console for everything
2. Take advantage of the fact that the lexer puts <span class="gp">$</span> around the $ and apply custom style user-select: none and padding-right: 5px to the .highlight-console span.gp class
3. Remove the proceeding whitespace to the command, so it is typed in as $tree /etc/ood/config

The result is this:

Original full issue description

Using "shell" format without preceding $ for commands users have to enter to do things makes it easier to copy a line: just click 3 times to highlight the line. This does copy the newline so if your shell isn't configured to not auto-execute the command when a newline is placed in (i.e. bash vs zsh) it could be bad if you want to paste, then inspect, then execute. But otherwise it is very convenient to follow through a set of directions.

One approach is to use console format with preceeding $ for read only with lots of output. For example, in https://osc.github.io/ood-documentation/master/release-notes/v1.3-release-notes.html#upgrading-from-v1-2 we use shell formatting for all the commands you will copy and execute, where as we use the console formatting for $ tree /etc/ood/config because it conveniently formats the code below it.

Two problems with this approach:

1. One problem is that this is inconsistent and if you are copying and pasting verbatim, as in testing an install in a VM, you might accidentally enter this full string $ tree /etc/ood/config instead of tree /etc/ood/config.
2. In the installation instructions there are many places where users enter commands AND we want to display the output.

What do other sites do? They are all over the place.

1. https://docs.pipenv.org/ just puts $ in the example code
2. https://theforeman.org/manuals/1.1/index.html#3.2.1Installation displays commands shell like, without displaying output
3. Digital Ocean displays commands and output in separate boxes which is an option https://www.digitalocean.com/community/tutorials/initial-server-setup-with-ubuntu-16-04
4. Heroku uses a cool approach where the styling looks like "console" with the $ but the doubleclick actually highlights only the first line. This is because they are using https://developer.mozilla.org/en-US/docs/Web/CSS/user-select on the $ . Example: https://devcenter.heroku.com/articles/exec

The ideal might be to:

1. Use console for everything
2. Take advantage of the fact that the lexer puts <span class="gp">$</span> around the $ and apply custom style user-select: none and padding-right: 5px to the .highlight-console span.gp class
3. Remove the proceeding whitespace to the command, so it is typed in as $tree /etc/ood/config

The result is this:

[treydock]

To add more examples, OSG uses full shell with root@host or user@host to make it clear if commands must be run as root or can be run as a user:

http://opensciencegrid.org/docs/worker-node/install-cvmfs/