Skip to content
This repository has been archived by the owner on Apr 23, 2020. It is now read-only.

Markdown line-breaks rendered incorrectly #1

Closed
kevinworth opened this issue Jun 7, 2016 · 3 comments
Closed

Markdown line-breaks rendered incorrectly #1

kevinworth opened this issue Jun 7, 2016 · 3 comments

Comments

@kevinworth
Copy link

It appears that grommet renders all line breaks in .md files, despite the Markdown specification spelling out how this behavior should work (https://daringfireball.net/projects/markdown/syntax#p)

PARAGRAPHS AND LINE BREAKS

A paragraph is simply one or more consecutive lines of text, separated by one or
more blank lines. (A blank line is any line that looks like a blank line - a
line containing nothing but spaces or tabs is considered blank.) Normal
paragraphs should not be indented with spaces or tabs.

The implication of the "one or more consecutive lines of text" rule is that
Markdown supports "hard-wrapped" text paragraphs. This differs significantly
from most other text-to-HTML formatters (including Movable Type's "Convert Line
Breaks" option) which translate every line break character in a paragraph into a
<br /> tag.

When you do want to insert a <br /> break tag using Markdown, you end a line
with two or more spaces, then type return.

Yes, this takes a tad more effort to create a <br />, but a simplistic "every
line break is a <br />" rule wouldn't work for Markdown. Markdown's email-style
blockquoting and multi-paragraph list items work best - and look better - when
you format them with hard breaks.

For an example, see a Markdown in a file whose text paragraphs are wrapped at 79 characters

http://git.openswitch.net/cgit/openswitch/ops/tree/docs/access_list_cli.md#n45

compared to the website rendered via grommet whose paragraphs are also (incorrectly) wrapped at the same 79 characters

http://www.openswitch.net/documents/user/access_list_cli#description

note the line endings in the "Description" section are exactly the same in .md and html instead of the html wrapping based on the width of the browser window.

(Transferred from grommet/grommet#624)

@kevinworth
Copy link
Author

Looking at open pull request markedjs/marked#348 ... the problem it fixes involves when breaks = true (grommet-markdown-loader appears to set it to false https://github.com/grommet/grommet-markdown-loader/blob/master/marked.js#L1243 ) but wondering if the logic re-write might fix this issue as a side-effect.

@alansouzati
Copy link
Collaborator

This is happening because of the following case:

renderer.paragraph = function (text) {
  return '<p>' + text.replace(/\n/g, '<br />') + '</p>';
}

Removing that seems to fix the issue with the new React version 15.

screen shot 2016-06-10 at 12 51 02 pm

@alansouzati
Copy link
Collaborator

Fixed in 4ce0e1f

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants