Possible to make bold text in fenced code blocks?

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!

May this new feature (like you must have the newest Hugo new) will help?

1 Like

One option would be the hl_lines attribute from Markdown:

That will work on complete lines only, it will not give you any “strong” tag, but you can style it as you please with CSS.

If that doesn’t fit the bill you could create a markdown hook that applies this logic … 1. Highlight 2. Replace delimiters wth “strong”.