@@ -53,6 +53,7 @@ React component to render markdown.
5353* [ Architecture] ( #architecture )
5454* [ Appendix A: HTML in markdown] ( #appendix-a-html-in-markdown )
5555* [ Appendix B: Components] ( #appendix-b-components )
56+ * [ Appendix C: line endings in markdown (and JSX)] ( #appendix-c-line-endings-in-markdown-and-jsx )
5657* [ Security] ( #security )
5758* [ Related] ( #related )
5859* [ Contribute] ( #contribute )
@@ -671,6 +672,65 @@ Every component will receive a `node`.
671672This is the original [` Element ` from ` hast ` ][hast-element] element being turned
672673into a React element.
673674
675+ ## Appendix C: line endings in markdown (and JSX )
676+
677+ You might have trouble with how line endings work in markdown and JSX .
678+ We recommend the following , which solves all line ending problems:
679+
680+ ` ` ` jsx
681+ // If you write actual markdown in your code, put your markdown in a variable;
682+ // **do not indent markdown**:
683+ const markdown = `
684+ # This is perfect !
685+ `
686+
687+ // Pass the value as an expresion as an only child:
688+ <Markdown>{markdown}</Markdown>
689+ ` ` `
690+
691+ 👆 That works .
692+ Read on for what doesn ’t and why that is .
693+
694+ You might try to write markdown directly in your JSX and find that it ** does
695+ not ** work :
696+
697+ ` ` ` jsx
698+ <Markdown>
699+ # Hi
700+
701+ This is **not** a paragraph.
702+ </Markdown>
703+ ` ` `
704+
705+ The is because in JSX the whitespace (including line endings ) is collapsed to
706+ a single space .
707+ So the above example is equivalent to :
708+
709+ ` ` ` jsx
710+ <Markdown> # Hi This is **not** a paragraph. </Markdown>
711+ ` ` `
712+
713+ Instead , to pass markdown to ` Markdown ` , you can use an expression:
714+ with a template literal :
715+
716+ ` ` ` jsx
717+ <Markdown>{ `
718+ # Hi
719+
720+ This is a paragraph .
721+ ` }</Markdown>
722+ ` ` `
723+
724+ Template literals have another potential problem , because they keep whitespace
725+ (including indentation) inside them.
726+ That means that the following **does not** turn into a heading:
727+
728+ ` ` ` jsx
729+ <Markdown>{ `
730+ # This is ** not ** a heading , it’s an indented code block
731+ ` }</Markdown>
732+ ` ` `
733+
674734## Security
675735
676736Use of ` react-markdown ` is secure by default.
0 commit comments