Skip to content

Commit 72e68d2

Browse files
committed
Add docs on line endings
Closes Gh-749.
1 parent b67d714 commit 72e68d2

File tree

1 file changed

+60
-0
lines changed

1 file changed

+60
-0
lines changed

readme.md

+60
Original file line numberDiff line numberDiff line change
@@ -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`.
671672
This is the original [`Element` from `hast`][hast-element] element being turned
672673
into 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 doesnt 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

676736
Use of `react-markdown` is secure by default.

0 commit comments

Comments
 (0)