Improve shell syntax highlighting

[adesso-os]

As is, there are several code blocks with lines prefixed with $, indicating to me that they want to mimic a shell session. These code blocks are marked with either sh or bash tags, to suggest syntax highlighting appropriate for such shell sessions.

This doesn't seem ideal, because command output is highlighted just as if it was another shell command.

Before

Hugo uses the Chroma syntax highlighter, which provides a dedicated lexer specifically for such scenarios. This change makes use of that lexer to improve the formatting.

After

There were several cases where lines in these code blocks wanted to indicate comments using #, which indicates a comment in a shell script. However, because # commonly indicates the prompt of a root shell, such lines had to be adjusted to correctly reflect shell usage, where the comment would be entered on the prompt. This felt weird initially, but the consistent behavior and correctness ultimately made me prefer it.

The type console was specifically chosen in favor over other tags (like bash-session), because the docsy theme specifically supports this language tag to improve the user experience on such code blocks. The copy-to-clipboard behavior will not copy command output, or the prompt character, in these cases.

https://github.com/google/docsy/blob/62f3ca81a9e4f7fb683e1f94a7ac25cb9236430d/theme/assets/scss/td/_code.scss#L93-L104

Clipboard Content Before

$ sops edit mynewtestfile.yaml
mynewtestfile.yaml doesn't exist, creating it.
please wait while an encryption key is being generated and stored in a secure fashion
file written to mynewtestfile.yaml

Clipboard Content After

sops edit mynewtestfile.yaml

For the more complex usage scenarios in the Advanced Usage section, I switched the prompt prefix to % to use $ for the sub-shell, to align with Chroma expectations.

I also applied the console tag consistently throughout the code base to encourage adopting this approach, instead of using the other shell types that might feel more appropriate when not used to this specific behavior. It also makes the copy-to-clipboard feature consistently not copy the prompt prefix.

[netlify]

✅ Deploy Preview for getsops ready!

Name	Link
🔨 Latest commit	a5fb343
🔍 Latest deploy log	https://app.netlify.com/projects/getsops/deploys/6a706e514607f500084efc64
😎 Deploy Preview	https://deploy-preview-47--getsops.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[felixfontein]

Thanks for working on this! I agree that $ # looks kind of ugly (that was my first impression), but as you wrote, the result is better that way...

[adesso-os]

Thanks for working on this! I agree that $ # looks kind of ugly (that was my first impression), but as you wrote, the result is better that way...

I looked at the lexer for some time, trying to figure out if there's a more elegant way to add this information. One way I could see would be to make it appear just like regular command output, but that also seems confusing in terms of consistency.

Another approach would be to split up, and move these comments out of the code blocks. This also didn't feel quite right, but would have the benefit of making the copy-to-clipboard feature slightly more useful, because it would copy smaller steps.