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.