A markdown question

[fergus]

Dear Weavers

I am tearing my hair out, over something that I am sure is really easy once you know how to do it. I would like lists in markdown to have a hanging indent, so that the bullet is on the left, and the left hand of all the lines in the paragraph align.

EVERY description of markdown I can find online repeats the same information without describing exactly what I should do to achieve it:

"To make lists look nice, you can wrap items with hanging indents:

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
  viverra nec, fringilla in, laoreet vitae, risus.
  etc.

I’d be very grateful if someone could explain what “wrap items with hanging indents” means.

Best wishes

FERGUS BLACK

[tav]

Just put a hyphen or an asterisk followed by a space to start the line that you want to be a list item.
All markdown stacks have an example of this in their default text when you add them to the page so that you can see how it is done. (they also have a link to the markdown syntax cheat sheet page).

[tav]

Here is the default Stacks markdown stack with a lot of nonsense text to make the list item wrap, as you can see, list items indent multiline content.

This is a function of the HTML and CSS, it is nothing to do with markdown which simply generated the list HTML.

Screenshot 2020-05-25 at 09.42.02.png

[fergus]

That is very kind. The screenshot shows what I would expect, but I don’t get that behaviour myself. I am using Source MD stack, as on this page:

Setting up for online lessons

The lists in the General Environment and Improving the experience sections are in Markdown, and are not hanging.

Best wishes

[habitualshaker]

HI @fergus I think that same thing was covered here:

Markdown lists display in different browsers

Thank you, guys. You were right. When I eliminated lines between list items, everything lined up properly now. This is a bit embarrassing because I thought I have checked it both with and without lines in between, but apparently I have not…

[fergus]

Thank you @habitualshaker. @mitchellm is surely right in the other thread that many people have problems with MD lists. I have added blank lines before and after, but not inbetween. I have also removed two blank spaces after each bullet point.

However, I still am not getting the expected behaviour. Here are two screenshots from a page with the Source theme: the first shows the Source MD stack, but without the CSS base added to the page - the markdown renders correctly.

The second screenshot show exactly the same page with the Source CSS base added. As you can see, the markdown has lost the hanging indents in the list.

Can I send you anything else to help pinpoint what is causing the problem?

[habitualshaker]

Ah ok. Sorry missed that from your previous screenshot. I’ll add an option in a future version of the MD stack that will let you control this styling behaviour.

[habitualshaker]

If you switch over to using @tav’s Scribe (at least for now) it will let you override this.

Edit - in fact that won’t work either. Here’s some custom css you can use. Add shift-bullet to the class name box for the Markdown stack in Stacks 4. And then add this to the page css.

.shift-bullet ul{
	list-style-position: outside;
	margin-left: 20px
}

That should do it for now!

[habitualshaker]

Just a note to say that Source 1.4 (hopefully out later today!) will fix up this issue.

[fergus]

Thank you. Not just a quick fix, but a permanent solution in the same day. Wonderful!

[GKs]

Great, V1.4 fixes both the Source Markdown stack and the Scribe Markdown to offer both options with ‘inside’ and ‘outside’ bullet indentation in the Source framework. (Scribe was of course working in other frameworks all along)

[fergus]

And the update has options for integrating with Poster2. It must be Christmas.