Properly indented code block within a list

tips & tricks
1

I have been struggling to figure out how to properly indent a block of code (with language) when inside a list and found the solution which I wanted to share.

The notation ```cpp only works when it starts at the first column and as a result it is not properly indented in the list. Instead you can use <highlight> shortcode like so (note the 4 spaces before <highlight>!):

* item 1
* item 2
    {{< highlight cpp >}}
// my cpp code to hightlight
{{< / highlight >}}

which renders like this:

Screen Shot 2020-09-06 at 09.05.20

Now the code block is properly indented as part of the item 2 instead of being outside the list.

2

Hi, Thanks for the tip. Regarding ```, I’ve found that it works nice in lists if you indent the whole block, like:

  • blah
  • blah
    blah: bar
  foo: bar
3

I guess you are right. I thought that ``` notation only worked when starting at the first column. I really struggled to make it work and couldn’t find any documentation about it until I tried with {{< highlight cpp >}}…

So yes I confirm that you can also rewrite it this this way (in hugo 0.74.3):

* item 1
* item 2
  ```cpp
  // this is my cpp code
  ```