fix jsx syntax highlight

Author: ibirnam

P01-Build-A-Header-Component/content.md

@@ -11,7 +11,7 @@ React projects are built with Components. To build web applications with React y
 
 App, Header, Logo, NavBar, NavLink, Content, Card, Footer
 
-Each of these elements would be separate Components, and you would define a file for each. Component files are always named after the component they contain: `App.js`, `Header.js`, `Logo.js`, `NavBar.js`, `NavLink.js`, `Content.js`, `Card.js`, and `Footer.js`. 
+Each of these elements would be separate Components, and you would define a file for each. Component files are always named after the component they contain: `App.js`, `Header.js`, `Logo.js`, `NavBar.js`, `NavLink.js`, `Content.js`, `Card.js`, and `Footer.js`.
 
 Components can be nested. That is one Component can be the child of another Component. Rendering the parent would render the child. The components from the list above might be nested in this way:
 
@@ -104,19 +104,19 @@ You may have noticed that `React`, the variable imported at the top of the page,
 
 JSX has rules of syntax that come with it.
 
-**Rule** JSX must always have a top level node. 
+**Rule** JSX must always have a top level node.
 
 For example, the code below produces an error:
 
-```JSX
+```js
 // Error! Sibling nodes
 <h1>Hello</h1>
 <p>World</p>
 ```
 
 Whereas this code will not produce an error:
 
-```JSX
+```js
 // Good! has a single top level element
 <div>
   <h1>Hello</h1>
@@ -208,20 +208,20 @@ Since the Component doesn't have any child Components you can use a self-closing
 
 This is another **rule** of the JSX Language. Empty tags can be written as a single tag ending with `/`.
 
-**Challenge:** If you're not running your React project do it now and check out your work in the browser. 
+**Challenge:** If you're not running your React project do it now and check out your work in the browser.
 
-- Using the terminal navigate to your project directory. 
+- Using the terminal navigate to your project directory.
 - In terminal run: `yarn start`bash
 
-You should only see the page title at the top, it's the only thing your App component is rendering at the moment. 
+You should only see the page title at the top, it's the only thing your App component is rendering at the moment.
 
-**Challenge:** Add the logo to the page. 
+**Challenge:** Add the logo to the page.
 
-To do this you'll need to add a new tag. Add an `<img />` tag. Notice the tag ends with a `/`. 
+To do this you'll need to add a new tag. Add an `<img />` tag. Notice the tag ends with a `/`.
 
-Add the src attribute and set the value to logo. 
+Add the src attribute and set the value to logo.
 
-```JSX
+```js
 <img src={logo} />
 ```
 

P02-Building-Content/content.md

@@ -116,7 +116,7 @@ function POPOSSpace() {
 export default POPOSSpace
 ```
 
-There are a few things missing here but you will revisit this shortly and pick up those details. You used the React Logo as a place holder for images that will come in the future. 
+There are a few things missing here but you will revisit this shortly and pick up those details. You used the React Logo as a place holder for images that will come in the future.
 
 For now import `POPOSSpace` into to your `POPOSList`.
 
@@ -158,7 +158,7 @@ Also, notice how your project is structured.
       - POPOSSpace
       - POPOSSpace
 
-If you imagine your project as tree structure you can see that you have components nested within components similar to the HTML DOM. 
+If you imagine your project as tree structure you can see that you have components nested within components similar to the HTML DOM.
 
 # Add some Local Image Files
 
@@ -190,9 +190,9 @@ function POPOSSpace() {
   return (
     <div>
       <img src={`${process.env.PUBLIC_URL}images/50-california-st.jpg`}     
-        width="300" 
-        height="300" 
-        alt="50 Califonia St." 
+        width="300"
+        height="300"
+        alt="50 Califonia St."
       />
       <h1>Name...</h1>
       <div>Address...</div>
@@ -204,7 +204,7 @@ function POPOSSpace() {
 >
 ```
 
-Note! Here you set the path to an image by combing a variable and a string. This is a JavaScript expression and must be enclosed in `{...}`. 
+Note! Here you set the path to an image by combing a variable and a string. This is a JavaScript expression and must be enclosed in `{...}`.
 
 Your website should now look something similar to the following:
 
@@ -242,12 +242,12 @@ The string needs to begin with the path to the public directory. React has an en
 
 Last, put the variable inside `${}`:
 
-```JSX
-<img 
-  src={`${process.env.PUBLIC_URL}images/50-california-st.jpg`} 
-  width="300" 
-  height="300" 
-  alt="Hello" 
+```js
+<img
+  src={`${process.env.PUBLIC_URL}images/50-california-st.jpg`}
+  width="300"
+  height="300"
+  alt="Hello"
 />
 ```
 
@@ -292,11 +292,11 @@ function POPOSSpace(props) {
   const { name, image, address } = props
   return (
     <div>
-      <img 
-        src={`${process.env.PUBLIC_URL}images/${image}`} 
-        width="300" 
-        height="300" 
-        alt="Hello" 
+      <img
+        src={`${process.env.PUBLIC_URL}images/${image}`}
+        width="300"
+        height="300"
+        alt="Hello"
       />
       <h1>{name}</h1>
       <div>{address}</div>
@@ -338,19 +338,19 @@ function POPOSList() {
 
 The values for props are defined as attributes. The names here must match the names used within the component! Earlier you used: name, image, and address. These are the names that must be used here.
 
-Compare the two components: 
+Compare the two components:
 
 
 
-```JSX
+```js
 // In POPOSList.js
 <POPOSSpace
   name="50 California Street" // name
   address="50 California St." // address
   image="50-california-st.jpg"// image
 />
 ```
-```JSX 
+```js
 // In POPOSSpace.js
 function POPOSSpace(props) {
   // The attributes above set the values of these properties
@@ -372,7 +372,7 @@ You can assign props as key value pairs defined in JSX like attributes in HTML.
 
 You can access props inside a component from the `props` object which is passed as a parameter, like so:
 
-```JSX
+```js
 function MyComp(props) {
   <div>
     <h1>{props.message}</h1> // Hello World

P05-Adding-React-Router/content.md

@@ -33,7 +33,7 @@ A Route is responsible for displaying components. Routes have a path property: w
 
 In code this might look like: 
 
-```JSX
+```js
 <Router>
   <Route path='/home' ... />
   <Route path='/about' ... />