Darek Kay's picture
Darek Kay
Solving web mysteries

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.

Using CSS to improve CLI documentation