I would like to write a documentation for a project that will include a lot of samples of container runtime commands, e.g. docker run or podman run.
I would like to offer a simple drop-down menu, where the user can select their favorite runtime (docker, podman, nerdctl) and depending on what they have chosen, the code snippets would include their choice.
Is something like this achievable with hugo?
Hugo generates static websites. What you want can be achieved with JavaScript that you have to add to your site. Depending on the size of the code snippets, I’d simply provide all of them in a page and then set the CSS display value to none for those not selected by the user. As I said, JavaScript can do that.
Thanks for your answer! I know that I can do this kind of stuff with JS, I was merely wondering if hugo could help me here further, e.g. by providing automatic classes for the code blocks or marking the to be replaced part as a specific class?
See here
and search for “attribute”: You can add a class to a fenced code block.
Nice thank you, that’s exactly what I was looking for! Unfortunately, Goldmark does not support adding a class around code blocks 
, which is where I’d need this
Hugo docs does something very similar to this, see e.g. Configure Hugo | Hugo. You can switch between yaml/toml/json.
It is done with this neat shortcode hugoDocs/code-toggle.html at master · gohugoio/hugoDocs · GitHub
I’m not sure what you mean by this. You can do either of the following to add the classes “foo” and “bar” to the outer div element.
```bash {class="foo bar"}
declare a=something
```
or
```bash {.foo .bar}
declare a=something
```