@@ -53,6 +53,7 @@ React component to render markdown.
53
53
* [ Architecture] ( #architecture )
54
54
* [ Appendix A: HTML in markdown] ( #appendix-a-html-in-markdown )
55
55
* [ Appendix B: Components] ( #appendix-b-components )
56
+ * [ Appendix C: line endings in markdown (and JSX)] ( #appendix-c-line-endings-in-markdown-and-jsx )
56
57
* [ Security] ( #security )
57
58
* [ Related] ( #related )
58
59
* [ Contribute] ( #contribute )
@@ -671,6 +672,65 @@ Every component will receive a `node`.
671
672
This is the original [` Element ` from ` hast ` ][hast-element] element being turned
672
673
into a React element.
673
674
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
+
674
734
## Security
675
735
676
736
Use of ` react-markdown ` is secure by default.
0 commit comments