Custom numbering in list

support
1

Hello,

I’m trying to attain custom numbering in a list with styling of normal markdown list. A sample of my list looks like this-

0. lkasjdf
2. laksjdf
4. laksdjf
6. laksdjf

Rather than rendering as it is, the actual list rendered is-

0. lkasjdf
1. laksjdf
2. laksdjf
3. laksdjf

I’m wondering if there is a way to do it in hugo?

Thanks!

2

The numbers in markdown switch to an ordered list! I would use UL and

- 0. lkasjdf
- 2. laksjdf
- 4. laksdjf
- 6. laksdjf

result:

    1. lkasjdf
    1. laksjdf
    1. laksdjf
    1. laksdjf

and remove the DOT with CSS list-style-type: none;

HTH

1 Like
3

It’s more of a Markdown thing. Markdown doesn’t define a way to jump the numbers in an ordered list. It will work if you instead switch to using raw HTML for that portion of your Markdown content.

<ol class="org-ol">
  <li value="17">This will be 17!</li>
  <li>This will be 18.</li>
  <li value="123">This will be 123!</li>
  <li>This will be 124.</li>
</ol>

Yes, Hugo (CommonMark) does allow interleaving Markdown and HTML, but you need to set this option in your site config:

# In your config.toml
[markup.goldmark.renderer]
  unsafe = true

Ref: I have a test page for forcing ordered list numbering here.

2 Likes
4

I think it can be done in CSS, which makes more sense to me (consider adding elements or removing them) than hardcoding it in HTML.

1 Like
5

Building on the suggestion from @chrillek…

config.toml

[markup.goldmark.parser.attribute]
block = true  # default false

markdown

List

1. Item
1. Item
1. Item
1. Item
1. Item
1. Item
{class="zero-by-two"}  // or simply {.zero-by-two}

css

ol.zero-by-two {
  counter-reset: zero-by-two -2;
  list-style: none;
  padding: 0;
}
ol.zero-by-two li {
  counter-increment: zero-by-two 2;
}
ol.zero-by-two li::before {
  content: counter(zero-by-two) ".";
  display: inline-flex;
  justify-content: right;
  margin-left: 1em;
  margin-right: .25em;
  width: 1em;
}
3 Likes
6

Thanks people for suggesting the solutions. For now the quickest way to go forward for me is the html-in-md approach, though in future I would like to bend towards custom CSS solution due to the fact that HTML in md doesn’t appease aesthetically and also its not that pleasant to write when compared to markdown.

Annotating markdown with a CSS classes is pretty neat trick. It combines the best of both worlds- simplicity of writing markdown and dynamic customizability of CSS. Didn’t know about that. Thanks a lot for mentioning the feature.

7

FYI I’ve marked @kaushalmodi 's answer as the solution to my question just because I ended up using that. This marking is not entirely correct as other solutions also achieve the same effect. Just wanted to highlight this.

8

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.