Ordered List rendering in Joplin Markdown Guide?

Leigh · 2023-11-10T12:35:04.420Z

Hi,

in the Joplin Markdown Guide it says:

Ordered List

Markdown:

Introduction
Main topic
1. First sub-topic
2. Second sub-topic
Conclusion

Rendered Output

Introduction
Main topic
i. First sub-topic
ii. Second sub-topic
Conclusion

But this renders as the below for me:

Introduction
Main topic
1. First sub-topic
2. Second sub-topic
Conclusion

Is this a typo on the Guide?

&/or can I get the i. ii. etc (or other) format(s) anyhow (that would be nice)

I just use the editing pane

Cheers!
Leigh

Joplin 2.12.18 (prod, linux)

Client ID: db5859eae4e74c52a26916ea37e9f7b0
Sync Version: 3
Profile Version: 43
Keychain Supported: No

Revision: e47b908 (master)

Menu items, Shortcuts, Toolbar icons: 1.1.0
Note Tabs: 1.4.0

dpoulton · 2023-11-11T11:14:38.970Z

Joplin displays the list the same for me as it does for you. I guess that the docs site is using a different stylesheet to Joplin??

I believe that you could use list-style-type in userstyle.css to modify how lists display.

All the different style types are shown here.

The type list-style-type: lower-roman;appears to be the one you are looking for.

Leigh · 2023-11-13T08:26:33.798Z

Thanks @dpoulton !

Leigh · 2023-11-13T11:37:12.583Z

OK,
I have to ask
How the hell would I do that?
Is it possible to be able to select different styles for different lists and/or different levels?

dpoulton · 2023-11-13T12:48:51.146Z

Leigh:

How the hell would I do that?

To leave the top level as a number and change sub levels to roman you would be looking to change any ordered list that is itself an item in a list.

Off the top of my head, without testing it, in userstyle.css try:

li ol {
    list-style-type: lower-roman;
    }

Leigh · 2023-11-15T11:30:39.955Z

Thanks!
That does work (but only if I restart the numbering from 1. again for any indentations)

and so on ....


/* For styling the rendered Markdown */
li ol {
    list-style-type: upper-roman;
    }
li li ol {
    list-style-type: lower-roman;
    }
li li li ol {
    list-style-type: upper-latin;
    }
li li li li ol {
    list-style-type: lower-latin;
    }

dpoulton · 2023-11-15T16:14:45.224Z

Leigh:

... only if I restart the numbering from 1. again for any indentations

Unless I have misunderstood what you mean, that is supposed to happen. A ordered list which is within a list is a new list and so starts from one. It enables you to have "legal-like" numbering such as: 3(a)(i)

Or, if you mean you have to physically type "1" to start a sub-list this is because with Markdown the item number has no real meaning apart from indicating what follows is part of a numbered list. That said, the number used for the very first list item does have significance as the renderer will count up from that number.

It is when the Markdown is rendered that auto-numbering is applied.

lists444×509 26.2 KB

Personally, all entries in my lists start 1. like the "All same" example above, and I let Joplin sort out the numbering.

Leigh · 2023-11-15T16:55:43.522Z

dpoulton:

That said, the number used for the very first list item does have significance as the renderer will count up from that

That's it, so its all working as it should then

dpoulton:

It enables you to have "legal-like" numbering such as: 3(a)(i)

ooooooow! How do I do this then? What would be really good would be cascading lists like 1.1.1.1 etc

Please?!

dpoulton · 2023-11-15T19:38:16.093Z

Sorry to build up your hopes! I only meant that you could have numerical, followed by lower roman, followed by lower alpha as you went down the list

It may be possible (and it may be worth giving this forum a search for old posts) but it is beyond me!

Leigh · 2023-11-15T21:33:21.815Z

Actually I think your example there looks cleaner and clearer than having 2.i.b. on the line for example!
I'm happy anyway,
Cheers! (as ever)

dave_swofford · 2023-11-17T04:12:01.705Z

You can get the "1.2.1.3" rendering using:

ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }

For example, using that in userstyle.css with:

1. first level 1 item
	1. first level 2 item
	1. second level 2 item
1. second level 1 item
	1. first level 2 item
	1. second level 2 item
		1. first level 3 item
		1. second level 3 item

renders as:

Leigh · 2023-11-17T20:01:00.357Z

Cheers @dave_swofford !

system · 2023-12-17T20:01:44.272Z

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