[beta] Ensure compat of Prettier and remark-header-custom-ids

beta/plugins/remark-header-custom-ids.js

@@ -39,7 +39,7 @@ module.exports = ({icon = svgIcon, className = `anchor`} = {}) => {
               id
           );
         }
-        id = id.slice(2, id.length - 2);
+        id = id.slice(2, id.length - 2).trim();
         if (id !== toSlug(id)) {
           throw Error(
             'Expected header ID to be a valid slug. You specified: {/*' +

beta/src/content/learn/add-react-to-a-website.md

@@ -10,19 +10,19 @@ You don't have to build your whole website with React. Adding React to HTML does
 
 <YouWillLearn>
 
-* How to add React to an HTML page in one minute
-* What is the JSX syntax and how to quickly try it
-* How to set up a JSX preprocessor for production
+- How to add React to an HTML page in one minute
+- What is the JSX syntax and how to quickly try it
+- How to set up a JSX preprocessor for production
 
 </YouWillLearn>
 
-## Add React in one minute {/*add-react-in-one-minute*/}
+## Add React in one minute {/* add-react-in-one-minute */}
 
 React has been designed from the start for gradual adoption. Most websites aren't (and don't need to be) fully built with React. This guide shows how to add some “sprinkles of interactivity” to an existing HTML page.
 
 Try this out with your own website or [an empty HTML file.](https://gist.github.com/gaearon/edf814aeee85062bc9b9830aeaf27b88/archive/3b31c3cdcea7dfcfd38a81905a0052dd8e5f71ec.zip) All you need is an internet connection and a text editor like Notepad or VSCode. (Here's [how to configure your editor](/learn/editor-setup/) for syntax highlighting!)
 
-### Step 1: Add a root HTML tag {/*step-1-add-a-root-html-tag*/}
+### Step 1: Add a root HTML tag {/* step-1-add-a-root-html-tag */}
 
 First, open the HTML page you want to edit. Add an empty `<div>` tag to mark the spot where you want to display something with React. Give this `<div>` a unique `id` attribute value. For example:
 
@@ -38,7 +38,7 @@ It's called a "root" because it's where the React tree will start. You can place
 
 You may have as many root HTML tags as you need on one page.
 
-### Step 2: Add the script tags {/*step-2-add-the-script-tags*/}
+### Step 2: Add the script tags {/* step-2-add-the-script-tags */}
 
 In the HTML page, right before the closing `</body>` tag, add three `<script>` tags for the following files:
 
@@ -59,11 +59,11 @@ Your HTML should now end like this:
 
 <Pitfall>
 
-Before deploying to a live website, make sure to replace `development.js` with `production.min.js`! Development builds of React provide more helpful error messages, but slow down your website *a lot.*
+Before deploying to a live website, make sure to replace `development.js` with `production.min.js`! Development builds of React provide more helpful error messages, but slow down your website _a lot._
 
 </Pitfall>
 
-### Step 3: Create a React component {/*step-3-create-a-react-component*/}
+### Step 3: Create a React component {/* step-3-create-a-react-component */}
 
 Create a file called **`like-button.js`** next to your HTML page, add this code snippet, and save the file. This code defines a React component called `LikeButton`. (Learn more about making components in the [Quick Start!](/learn))
 
@@ -87,7 +87,7 @@ function LikeButton() {
 }
 ```
 
-### Step 4: Add your React component to the page {/*step-4-add-your-react-component-to-the-page*/}
+### Step 4: Add your React component to the page {/* step-4-add-your-react-component-to-the-page */}
 
 Lastly, add three lines to the bottom of **`like-button.js`.** These lines of code find the `<div>` you added to the HTML in the first step, create a React root, and then display the "Like" button React component inside of it:
 
@@ -102,7 +102,7 @@ root.render(React.createElement(LikeButton));
 - [View the full example source code](https://gist.github.com/gaearon/0b535239e7f39c524f9c7dc77c44f09e)
 - [Download the full example (2KB zipped)](https://gist.github.com/gaearon/0b535239e7f39c524f9c7dc77c44f09e/archive/651935b26a48ac68b2de032d874526f2d0896848.zip)
 
-#### You can reuse components! {/*you-can-reuse-components*/}
+#### You can reuse components! {/* you-can-reuse-components */}
 
 You might want to display React components in multiple places on the same HTML page. This is useful if React-powered parts of your page are separate from each other. You can do this by putting multiple root tags in your HTML and then rendering React components inside each of them with `ReactDOM.createRoot()`. For example:
 
@@ -117,19 +117,23 @@ anotherRoot.render(React.createElement(LikeButton));
 
 If you need to render the same component in many places, you can assign a CSS `class` instead of `id` to each root, and then find them all. Here is [an example that displays three "Like" buttons and passes data to each.](https://gist.github.com/gaearon/779b12e05ffd5f51ffadd50b7ded5bc8)
 
-### Step 5: Minify JavaScript for production {/*step-5-minify-javascript-for-production*/}
+### Step 5: Minify JavaScript for production {/* step-5-minify-javascript-for-production */}
 
 Unminified JavaScript can significantly slow down page load times for your users. Before deploying your website to production, it's a good idea to minify its scripts.
 
 - **If you don't have a minification step** for your scripts, [here's one way to set it up.](https://gist.github.com/gaearon/ee0201910608f15df3f8cd66aa83f98e)
 - **If you already minify** your application scripts, your site will be production-ready if you ensure that the deployed HTML loads the versions of React ending in `production.min.js` like so:
 
 ```html
-<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
-<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
+<script
+  src="https://unpkg.com/react@18/umd/react.production.min.js"
+  crossorigin></script>
+<script
+  src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
+  crossorigin></script>
 ```
 
-## Try React with JSX {/*try-react-with-jsx*/}
+## Try React with JSX {/* try-react-with-jsx */}
 
 The examples above rely on features that are natively supported by browsers. This is why **`like-button.js`** uses a JavaScript function call to tell React what to display:
 
@@ -147,7 +151,7 @@ These two code snippets are equivalent. JSX is popular syntax for describing mar
 
 > You can play with transforming HTML markup into JSX using [this online converter.](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.17)
 
-### Try JSX {/*try-jsx*/}
+### Try JSX {/* try-jsx */}
 
 The quickest way to try JSX is to add the Babel compiler as a `<script>` tag to the page. Put it before **`like-button.js`,** and then add `type="text/babel"` attribute to the `<script>` tag for **`like-button.js`**:
 
@@ -174,11 +178,7 @@ return React.createElement(
 with the equivalent JSX code:
 
 ```jsx
-return (
-  <button onClick={() => setLiked(true)}>
-    Like
-  </button>
-);
+return <button onClick={() => setLiked(true)}>Like</button>;
 ```
 
 It may feel a bit unusual at first to mix JS with markup, but it will grow on you! Check out [Writing Markup in JSX](/learn/writing-markup-with-jsx) for an introduction. Here is [an example HTML file with JSX](https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html) that you can download and play with.
@@ -189,7 +189,7 @@ The Babel `<script>` compiler is fine for learning and creating simple demos. Ho
 
 </Pitfall>
 
-### Add JSX to a project {/*add-jsx-to-a-project*/}
+### Add JSX to a project {/* add-jsx-to-a-project */}
 
 Adding JSX to a project doesn't require complicated tools like a [bundler](/learn/start-a-new-react-project#custom-toolchains) or a development server. Adding a JSX preprocessor is a lot like adding a CSS preprocessor.
 
@@ -202,7 +202,7 @@ You only need npm to install the JSX preprocessor. You won't need it for anythin
 
 Congratulations! You just added a **production-ready JSX setup** to your project.
 
-### Run the JSX Preprocessor {/*run-the-jsx-preprocessor*/}
+### Run the JSX Preprocessor {/* run-the-jsx-preprocessor */}
 
 You can preprocess JSX so that every time you save a file with JSX in it, the transform will be re-run, converting the JSX file into a new, plain JavaScript file that the browser can understand. Here's how to set this up:
 
@@ -237,7 +237,7 @@ function Hello(props) {
 }
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<Hello toWhat="World" />, );
+root.render(<Hello toWhat="World" />);
 ```
 
 With `React.createElement()`, you would write it like this:
@@ -248,9 +248,7 @@ function Hello(props) {
 }
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  React.createElement(Hello, { toWhat: 'World' }, null)
-);
+root.render(React.createElement(Hello, {toWhat: 'World'}, null));
 ```
 
 It accepts several arguments: `React.createElement(component, props, ...children)`.