Skip to content

Updated a readme for react and this repository - #3316

Open
BEASTBOLTT wants to merge 1 commit into
airbnb:masterfrom
BEASTBOLTT:react-update/readme-updated
Open

Updated a readme for react and this repository#3316
BEASTBOLTT wants to merge 1 commit into
airbnb:masterfrom
BEASTBOLTT:react-update/readme-updated

Conversation

@BEASTBOLTT

Copy link
Copy Markdown

Fixes #2301 — JSX (and JavaScript) code examples were not displaying correctly on the generated webpage despite rendering fine in the GitHub README viewer.

Problem

Fixes: #2301
All fenced code blocks across README.md and react/README.md used 4-space-indented fence markers:

  • Some list item text...
    // bad
    return <div>{this.state.hello}</div>;

The CommonMark spec defines any line indented by 4 or more spaces as an indented code block. Many Markdown-to-HTML converters (including the one used to build the style guide webpage) interpret the 4-space-prefixed ```jsx lines as literal text inside an indented code block rather than as fenced code block delimiters. This caused:

The jsx / javascript markers to render as visible text on the page
JSX/HTML tags like

to bleed into the rendered HTML instead of being escaped inside a block
Syntax highlighting to break entirely
Fix
Moved all opening and closing fence markers to column 0 (no leading indentation), which is unambiguously parsed as a fenced code block by all CommonMark-compliant renderers:

  • Some list item text...
    // bad
    return <div>{this.state.hello}</div>;

## Changes
| File | Change |
|---|---|
| `README.md` | De-indented 150× ` ```javascript`, 1× ` ```diff`, and 151 closing ` ``` ` fences |
| `react/README.md` | De-indented 25× ` ```jsx` and 25 closing ` ``` ` fences |
All 176 fence pairs remain **balanced** after the change (verified).
## Testing
- [x] No 4-space-indented fences remain in either file
- [x] All opening fences have a matching closing fence (balanced)
- [x] `README.md` and `react/README.md` render correctly in GitHub's Markdown preview
- [x] Markdownlint passes (`npm run lint`)
## References
- Fixes #2301
- CommonMark spec on indented code blocks: https://spec.commonmark.org/0.30/#indented-code-blocks
- CommonMark spec on fenced code blocks: https://spec.commonmark.org/0.30/#fenced-code-blocks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

JSX is not displayed correctly in webpage

2 participants