Remove $ dollar sign from line copy&paste (user terminal commands)

[esbugz]

Terminal commands that a user is supposed to type are formatted with $ dollar sign

$ Commands to be typed into a terminal window.

However, this makes it very inconvenient to copy&paste the easiest selection item — the whole line — since the $ dollar sign will corrupt the command.

The better way is to either:

• enhance the guide's terminal command field to show the $ without it being selectable on triple click as some other websites do, or do what you do on ​https://ports.macports.org/ — you don't even need to triple click to select a line, just click the copy button
• or change the syntax to exclude the $ altogether (a much more disruptive move as it's a common convention to denote user terminal input with $)

[ryandesign (Ryan Carsten Schmidt)]

It's a good idea. I've certainly appreciated it when other web sites do that, but I've never attempted to figure out how they do that. If you or anyone can figure out what we need to change in the guide to cause that to happen, please send a pull request.

As of macOS Catalina the default shell changed from bash (whose default prompt ends with $) to zsh (where the default prompt ends with %) so we might want to switch to % at this point.

[esbugz]

One good example seems to simply put the $ (> in their case) in a separate span from the text command ​https://scoop.sh/#/apps?q=wget&s=0&d=1&o=true

>

<div class="mt-2 row">
  <div id="app-command" class="copy-command-group input-group input-group-sm">
    <!-- ↓ is the > prompt sign -->
    <span class="border-end-0 copy-command-prefix input-group-text">&gt;</span>
    <!-- ↓ is the text after the > prompt sign, it's an input field, so triple click selects only its content -->
    <input title="Copy to clipboard" type="text" readonly="" class="border-start-0 copy-command-text form-control" value="scoop install wget">
    <!-- ↓ is the copy button, you already have similar button in https://ports.macports.org/port/wget/ -->
    <button type="button" title="Copy to clipboard" class="copy-command-button btn btn-outline-secondary">
      <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 384 512" class="react-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
      <path d="M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z">
      </path>
      </svg>
    </button>
  </div>
</div>

Meanwhile there is one simple fix :) based on the existing functionality of ​https://ports.macports.org/port/wget/

$ Copy

<div class="mt-2 row">
  <div id="app-command" class="copy-command-group input-group input-group-sm">
    <!-- ↓ is the > prompt sign -->
    <span class="border-end-0 copy-command-prefix input-group-text">&gt;</span>
    <!-- ↓ is the text after the > prompt sign, it's an input field, so triple click selects only its content -->
    <input title="Copy to clipboard" type="text" readonly="" class="border-start-0 copy-command-text form-control" value="scoop install wget">
    <!-- ↓ is the copy button, you already have similar button in https://ports.macports.org/port/wget/ -->
    <button type="button" title="Copy to clipboard" class="copy-command-button btn btn-outline-secondary">
      <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 384 512" class="react-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
      <path d="M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z">
      </path>
      </svg>
    </button>
  </div>
</div>

Then the only missing piece will be making a hover on the input field select the copy button and a single click on the input field the whole text, but at least here a triple click does NOT select $, so that's already an improvement (and in the guide there is no copy button, so that's not a regression :))

[esbugz]

Oh, there seems to be a much easier option: just apply this (from [docs.python.org]) to the span containing the prompt marker and it won't be selected on triple click

<span class="gp">&gt;&gt;&gt; </span>

span.gp {
    user-select: none;
    -webkit-user-select: text;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}