Using CSS to improve CLI documentation

In technical documentation, authors often mark command line examples with a leading dollar sign ($). This practice makes the intent clear, but it's a little inconvenient when copy & pasting a command:

$ echo "Selecting this line includes the leading $"

There's something we as developers can do to simplify copying shell commands:

echo "The leading $ is not selectable"

The trick is to render the $ character as an ::before element.

.highlight.shell .line::before {
  content: "\000024\00a0";
}

The exact CSS selector will depend on your markup and highlighter, but my example should give you an idea to implement this technique in your setup.