search

snaptoken / leg

Tools for making step-by-step code walkthroughs
MIT License
130 stars 2 forks source link

Misformatted fenced code blocks in docs source markdown? #1

Closed rnorth closed 7 years ago

rnorth commented 7 years ago

Thank you for this awesome project - it's just what I've been looking for, and I'm thinking it will come in very useful!

I have hit a small issue though; I'd like to use fenced code blocks in my docs source markdown. While ordinary 'code' changes seem to belong as git commits, right now I'm trying to illustrate some shell commands that users need to run to get started.

When using a multi-line fenced code block like:

```somelang
  line 1
  line 2
```

it's actually being rendered like somelang line 1 line 2 - all in one line, and without the language specifier being hidden or used.

I suspect the cause is just that Redcarpet isn't being configured to use the fenced_code_blocks extension. Is this something you could possibly add? (I'm happy to submit a PR if it helps)

paigeruten commented 7 years ago

Fixed! Thanks for pointing this out.

rnorth commented 7 years ago

Thanks for the quick response on this! Unfortunately we tried updating to v0.22.0 and it seems something else is still affecting the formatting of the fenced code blocks - it seems like newlines are being replaced still. The example I gave above now renders as: line 1 line 2. It's clear that the fenced code block extension is doing something though, because the language identifier is no longer in the output text.

Looking at the code, is it possible that Smartypants could be removing the newlines after Redcarpet rendering?

paigeruten commented 7 years ago

It might be because my CSS specifies white-space: nowrap for <code> tags, which overrides white-space: pre for the <pre> tag. The CSS for <code> is kind of a mess, since there are now three types of <code> styles (inline, step diffs, and fenced code blocks). Here's a quick little fix I did for the CSS: https://github.com/snaptoken/pass-tutorial/commit/41f5d9abdba7fab222b6243593366a077d4bd797#diff-156889b864828e701e77c06d86b5ddad

rnorth commented 7 years ago

Aha, we'd not thought of that! I'll give it a try and will close the ticket if it works. Thank you!

rnorth commented 7 years ago

Yes, it was the CSS! We've modified ours with seemingly no ill effect on the other uses of <code>, so it's looking good now.