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 $"

I've learned a neat trick from Stefan Judis to have the shell ignore a leading $ character. But there's something we as developers can do to simplify copying shell commands:

echo "The leading $ is not selectable"
echo "It works with multiple lines, too!"

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

.highlight.bash .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.