Ignoring prompt prefix chars in code blocks from copyable text

[tkne]

Problem:
I want to distinguish between sudo user commands ($ prefix) and root user commands (# prefix) in code blocks when needed.
While that could be easily done with adding the desired prefix in front of the command it is not very user friendly, because once the user uses the copy button the prefix will be included in the clipboard.

Solution:
Here is an example of how I solved it for us.

Custom CSS

pre.language-shsudo .token-line::before {
  content:"$";
  margin-right:10px;
  opacity:.4
}

pre.language-shroot .token-line::before {
  content:"#";
  margin-right:10px;
  opacity:.4
}

Markdown file code block example

```shsudo title="Sudo command"
ls -la
```

```shroot title="Root command"
ls -la
```

```bash title="Bash script"
#!/bin/bash
echo "Hello World"
```

This is how it looks like in the end. Copying the ls -la commands in either example will not include their prefix in the clipboard while also not impacting on the bash code block (or any other language) for example.

Hope I could help!