Markdown does not display correctly

I’m generating Markdown in an app called MacDown (recommended) and then pasting it into a Markdown stack. Everything is fine in edit mode but when in preview mode (and published) the ordered lists have no numbers and the unordered lists second and subsequent lines are not indented. RW 8.1.6. Theme is Ruby. Any ideas?

A URL would be helpful.
Chances are the “no numbers” may be caused by CSS styling.

@oldgustav It might also be helpful if you put the EXACT markdown you used on this post. I’m sure a URL would help also. Here’s how to do it: start with one line with three backticks. Put in markdown. Have a list line also with 3 back ticks. Kinda like this:

Thi is my code:

1. this
2. that
3. the other thing

And here's more

When it comes to lists folks sometimes forget to put a clean line break before and after the list.

2 Likes

Ruby’s CSS for Ordered Lists has the padding removed. This is due to the framework that was used on this older theme. The Zurb framework had a reset that removed the padding from these lists. You could add it back in with some custom CSS in the Page Inspector’s Custom CSS field though:

ol {
    padding-left: 24px;
}

You can adjust the padding to fit your needs if you’d like to customize it.

1 Like

Thanks Adam, I will try this. Would this also cause the unordered lists to not indent on second and subsequent lines?

Sorry, didn’t include url because page is pagesafe protected.

If they look great in Edit mode, but the styling is not great in Preview (and Publish) then it’s likely that the theme is (or isn’t) applying some styles to these things.

In edit mode some very basic styles are applied to Markdown things. But a theme has full control over how to make all those things look.

A quick test by changing to a different theme is an easy way to verify this – try one of the super old “Classic” themes, they may not be the best themes for a nice modern responsive site – but they had great vanilla styles for the basics and tend to style Markdown pretty clearly.

Isaiah

Yes. Ordered and unordered lists are set to a 0 px padding. Just add an unordered list tag to the css I provided above if you need those to also be inset:

ol,
ul {
    padding-left: 24px;
}

It is the css for the theme. It is not related to stacks at all.

I think this means the long-overdue changeover to a Foundry site is imminent. Thing is, there are 70 pages and going up all the time…

Well, that sorted the ordered list nicely but the unordered list refuses to come into line. However, when switched to ordered list, the list items line up. Maybe I’ll leave it as a numbered list…

I really need to upgrade this site to Foundry. Thanks for your help.

The alignment of the bullets in the unordered list is a different thing entirely. The list-style-position for the unordered list is set to inside for the Ruby theme, as that is the design I was going for. You can alter it if you like to be outside, which is what I believe you’re looking for.

Oh brilliant! Is there a piece of custom CSS for that as well?

Sure. Google: css ul list style position and you’ll be on your way! :slight_smile:

Sorry Adam. I asked for that - and I’m always saying ‘find out for yourself!’

Doesn’t seem to want to play - but no worries, happy with ordered list!

If you would like help with CSS it’s always best to provide a URL to at least a test page.

I know you said earlier that it’s a “page safe” thing but you can create a simple test page outside of page safe with the theme and issue.

1 Like

By the way try dropping the .a

ul {
list-style-position: outside;
}
1 Like

This.

Don’t forget your padding, too.

1 Like

Yes, you are right - and it’s not as though it is highly confidential info anyway - it’s just to keep the Russian hackers out :slight_smile:

This plus padding worked perfectly! Thanks both - and it’s Sunday!

2 Likes

No problem. Enjoy the rest of your weekend. Look forward to seeing what you build when you go from Ruby to Foundry too! :grin: