I will be building a site that has lots of examples of using the shell/command line in several operating systems. I would like to be able to use fenced code blocks in my Markdown to represent terminal interactions, such as:
$ date
Wed Apr 6 12:04:12 AM PDT 2022
$ TZ=UTC date
Wed Apr 6 07:04:28 AM UTC 2022
I would like to apply a different style, such as bold, to the portions of the terminal session that users enter. In the above example, that’d be date and TZ=UTC date.
Is there any way I can do that? Any additional markdown formatting tags I use inside the code block are just passed through literally (as expected). I want to be able to define some delimiters that will never occur in my examples, such as wrapping the user input in « and », that would cause the rendered output to be wrapped in <strong> tags.
Lacking a way to do this with Hugo’s Markdown renderer, one alternative I can think of is to enable HTML with markup.goldmark.renderer.unsafe=true and just manually enter the <pre><code>... HTML tags in my content and wrap the user input in <strong> tags myself. However, I’m hoping there’s a better way, as this disables automatic escaping of other characters inside the block (< will be used a lot for shell redirection, for example).
The other approach I can think of is to write a custom syntax highlighter for a “language” that just recognizes text wrapped in « » and make it highlight that – but is it possible for a syntax highlighter to also remove characters (the delimiters)? I guess if nothing else the syntax highlighter could “highlight” those delimiter characters with a class which I create CSS for with display: none?
If anyone has advice on how I should proceed, I’d appreciate it!