Darek Kay's picture Darek Kay

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.

Want to leave a comment?

Join the discussion at Twitter or Mastodon. Feel free to drop me an email. 💌

Using CSS to improve CLI documentation