Improve README syntax highlight example #736

dlqqq · 2023-04-05T16:07:19Z

Initial checklist

I read the support docs
I read the contributing guide
I agree to follow the code of conduct
I searched issues and couldn’t find anything (or linked relevant results below)
If applicable, I’ve added docs and tests

Description of changes

Improves README syntax highlighting example. The current example produces a TypeScript error by default. See here: react-syntax-highlighter/react-syntax-highlighter#479 (comment)

remcohaszing · 2023-04-05T17:25:40Z

readme.md

@@ -354,14 +354,14 @@ ReactDom.render(
        const match = /language-(\w+)/.exec(className || '')
        return !inline && match ? (
          <SyntaxHighlighter
+            {...props}


It might be better to not even pass spread props at all.

Anyway, I'm not necessarily against it.

I think there was something about SyntaxHighlighter passing all other props through on the div or so:

spread props pass arbitrary props to pre tag wrapping code.
— https://github.com/react-syntax-highlighter/react-syntax-highlighter/tree/efc3f7b7537d1729193b7a472067bcbe6cbecaf1#props

Could be removed too, okay with me. But that can be a different PR!

remcohaszing · 2023-04-05T17:26:22Z

readme.md

          />
        ) : (
-          <code className={className} {...props}>
+          <code {...props} className={className}>


The order doesn't matter here.

true, but its not bad to be consistent with the other example!

ChristianMurphy

Thanks @dlqqq!
I'd second @remcohaszing's suggestions.

[![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [react-markdown](https://togithub.com/remarkjs/react-markdown) | [`8.0.6` -> `8.0.7`](https://renovatebot.com/diffs/npm/react-markdown/8.0.6/8.0.7) | [![age](https://badges.renovateapi.com/packages/npm/react-markdown/8.0.7/age-slim)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://badges.renovateapi.com/packages/npm/react-markdown/8.0.7/adoption-slim)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://badges.renovateapi.com/packages/npm/react-markdown/8.0.7/compatibility-slim/8.0.6)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://badges.renovateapi.com/packages/npm/react-markdown/8.0.7/confidence-slim/8.0.6)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>remarkjs/react-markdown</summary> ### [`v8.0.7`](https://togithub.com/remarkjs/react-markdown/releases/tag/8.0.7) [Compare Source](https://togithub.com/remarkjs/react-markdown/compare/8.0.6...8.0.7) ##### Perf - [`c289176`](https://togithub.com/remarkjs/react-markdown/commit/c289176) Fix performance for keys by [@wooorm](https://togithub.com/wooorm) in [remarkjs/react-markdown#738 ##### Docs - [`9034dbd`](https://togithub.com/remarkjs/react-markdown/commit/9034dbd) Fix types in syntax highlight example by [@dlqqq](https://togithub.com/dlqqq) in [remarkjs/react-markdown#736 **Full Changelog**: remarkjs/react-markdown@8.0.6...8.0.7 </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/ariakit/ariakit).  Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

improve readme syntax highlight example

1e7edac

github-actions bot added 👋 phase/new Post is being triaged automatically 🤞 phase/open Post is being triaged manually and removed 👋 phase/new Post is being triaged automatically labels Apr 5, 2023

remcohaszing approved these changes Apr 5, 2023

View reviewed changes

ChristianMurphy approved these changes Apr 6, 2023

View reviewed changes

wooorm approved these changes Apr 6, 2023

View reviewed changes

wooorm merged commit 9034dbd into remarkjs:main Apr 6, 2023
3 checks passed

wooorm added 📚 area/docs This affects documentation 💪 phase/solved Post is done labels Apr 6, 2023

This comment has been minimized.

Sign in to view

github-actions bot removed the 🤞 phase/open Post is being triaged manually label Apr 6, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve README syntax highlight example #736

Improve README syntax highlight example #736

dlqqq commented Apr 5, 2023

remcohaszing Apr 5, 2023

wooorm Apr 6, 2023

remcohaszing Apr 5, 2023

wooorm Apr 6, 2023 •

edited

ChristianMurphy left a comment

This comment has been minimized.

Improve README syntax highlight example #736

Improve README syntax highlight example #736

Conversation

dlqqq commented Apr 5, 2023

Initial checklist

Description of changes

remcohaszing Apr 5, 2023

Choose a reason for hiding this comment

wooorm Apr 6, 2023

Choose a reason for hiding this comment

remcohaszing Apr 5, 2023

Choose a reason for hiding this comment

wooorm Apr 6, 2023 • edited

Choose a reason for hiding this comment

ChristianMurphy left a comment

Choose a reason for hiding this comment

This comment has been minimized.

wooorm Apr 6, 2023 •

edited