docs: Console code-block highlighting

[ukkopahis]

Use the correct console highlighting for shell-session code-blocks and prevent user-selection of the leading $ and lines representing the command output. Do this in order to help the end-user to just copy just the relevant commands to be executed.

• update code blocks where there are both commands and output to use the console highlighting.
• prevent user from selecting the leading $ or the command output making it easier to copy-paste just all the commands. Done using css. Screenshot of how selection skips unwanted parts:
• fix the copy button to only copy the user-selectable parts of the code-block. Done with javascript.

[Paraphraser]

Found a few more in `docs/Containers/Node-RED.md that I'd like to change but there's probably a huge risk of collision so here they are in case you want to apply them:

diff --git a/actual/Node-RED.md b/proposed/Node-RED.md
index 616247f..4d3975f 100644
--- a/actual/Node-RED.md
+++ b/proposed/Node-RED.md
@@ -79,7 +79,7 @@ $ docker-compose up -d

 `docker-compose` reads the *Compose* file. When it arrives at the `nodered` fragment, it finds:

-```
+```yaml
   nodered:
     container_name: nodered
     build: ./services/nodered/.
@@ -94,7 +94,7 @@ The `build` statement tells `docker-compose` to look for:

 The *Dockerfile* begins with:

-```
+```Dockerfile
 FROM nodered/node-red:latest-12
 ```

@@ -214,7 +214,7 @@ Node-RED can run in two modes. By default, it runs in "non-host mode" but you ca

 1. Add the following directive:

-   ```
+   ```yaml
    network_mode: host
    ```

@@ -295,7 +295,7 @@ Key point:

 The Node-RED service definition in the *Compose* file includes the following:

-```
+```yaml
 volumes:
   - ./volumes/nodered/data:/data
 ```
@@ -699,7 +699,7 @@ $ touch config

 Select the following text, copy it to the clipboard.

-```
+```sshconfig
 host «HOSTNAME»
   hostname «HOSTADDR»
   user «USERID»
@@ -713,7 +713,7 @@ Replace the «delimited» keys. Completed examples:

 * If you are using the `«HOSTFQDN»` form:

-   ```
+   ```sshconfig
    host iot-dev
      hostname iot-dev.mydomain.com
      user pi
@@ -723,7 +723,7 @@ Replace the «delimited» keys. Completed examples:

 * If you are using the `«HOSTIP»` form:

-   ```
+   ```sshconfig
    host iot-dev
      hostname 192.168.132.9
      user pi
@@ -885,7 +885,7 @@ The `--build` option on the `up` command (as distinct from a `docker-compose bui

 Out of the box, IOTstack starts the Node-RED *Dockerfile* with:

-```
+```Dockerfile
 FROM nodered/node-red:latest-12
 ```

@@ -899,7 +899,7 @@ $ docker exec nodered node --version

 In the unlikely event that you need to run an add-on node that needs version 10 of `node.js`, you can pin to version 10.x.x by changing the first line of your *Dockerfile* like this:

-```
+```Dockerfile
 FROM nodered/node-red:latest-10
 ```

@@ -921,7 +921,7 @@ Packages installed this way will persist until the container is re-created (eg a

 The second method changes the *Dockerfile* to add the packages permanently to your build. You just append the packages to the end of the existing `apk add`:

-```
+```Dockerfile
 RUN apk update && apk add --no-cache eudev-dev mosquitto-clients bind-tools tcpdump
 ```

@@ -1013,7 +1013,7 @@ Add-on nodes installed via Manage Palette wind up at the **external** path:

 The *Compose* file volumes mapping:

-```
+```yaml
 ./volumes/nodered/data:/data
 ```

[Paraphraser]

Saw the changes roll in so I thought I'd give it a whirl.

Agonisingly close.....

Selection inside the fence now excludes both "$":

but the copy button gets:

cd ~/IOTstack
$ docker-compose up -d

So, first "$" excluded, second "$" still playing hard-to-get.

[ukkopahis]

@Paraphraser

Agonisingly close.....

I assume you're testing on Safari.

Selection inside the fence now excludes both "$": + copy button gets:, first "$" excluded, second "$" still playing hard-to-get.

This combination was something I encountered and later fixed for Chrome. Latest version ready and published, with a bit changed (hopefully more robust) logic. Tested to now work for both firefox and chrome. Could you re-test with Safari on my fork: https://ukkopahis.github.io/IOTstack

[ukkopahis]

Found a few more in `docs/Containers/Node-RED.md that I'd like to change but there's probably a huge risk of collision so here they are in case you want to apply them:

No conflicts, applied. (even though not the topic of this PR) EDIT: this and hopefully all other missing highlight types added as #549

[Paraphraser]

In Safari, if I drag-to-select within a code fence, the $ prompts are all excluded:

But if I click the "copy to clipboard" button in that same fence then I get:

$ cd ~/IOTstack
$ sudo cp ./.templates/wireguard/use-container-dns.sh ./volumes/wireguard/custom-cont-init.d/
$ docker-compose restart wireguard

Maybe it'd be better to just disable those copy-to-clipboard buttons at a global level. Yes/no?

[ukkopahis]

Maybe it'd be better to just disable those copy-to-clipboard buttons at a global level. Yes/no?

No. Everything already works just fine with Firefox and Chrome. Shouldn't be that hard to fix Safari lastly. But if (big if) I can't fix Safari we can just hide the copy-button for Safari, and only from console-highlighted blocks.

[ukkopahis]

@Paraphraser I could replicate the Safari problem using Epiphany. Should be fixed now, could you retest to verify?

[Paraphraser]

Brilliant! Checked both macOS Safari and iOS Safari. My understanding is all iOS browsers use the same WebKit (walled garden stuff) so I think a successful Safari test covers the others too.