Formatting updates.

manuscript/getting-ready-to-render-with--createelement-.markua

@@ -1,4 +1,4 @@
-# Getting Ready to Render with `createElement`
+# Getting Ready to Render with createElement
 
 React's `render` expects to consume a tree of element objects in a specific, uniform format. `createElement` is the method by which we achieve that objective. `createElement` will take as input JSM and output a tree of objects compatible with `render`. 
 
@@ -7,13 +7,13 @@ React expects nodes defined as JavaScript objects that look like this:
 {format: "javascript"}
 ```
 {
-    type: NODE_TYPE,
-    props: {
-         propA: VALUE,
-         propB: VALUE,
-         ...
-         children: STRING | ARRAY
-    }
+   type: NODE_TYPE,
+   props: {
+      propA: VALUE,
+      propB: VALUE,
+      ...
+      children: STRING | ARRAY
+   }
 }
 ```
 
@@ -22,26 +22,26 @@ That is: an object with two properties: `type` and `props`. The `props` property
 {format: "javascript"}
 ```
 function createElement(node) {
-    // if array (not text, number, or other primitive)
-    if (typeof node === 'object') {
-        const [ tag, props, children ] = node;
-        return {
-            type: tag,
-            props: {
-                ...props,
-                children: children.map(createElement)
-            }
-        };
-    }
+   // if array (not text, number, or other primitive)
+   if (typeof node === 'object') {
+      const [ tag, props, children ] = node;
+      return {
+         type: tag,
+         props: {
+             ...props,
+             children: children.map(createElement)
+         }
+      };
+   }
 
-    // primitives like text or number
-    return {
-        type: 'TEXT',
-        props: {
-            nodeValue: node,
-            children: []
-        }
-    };
+   // primitives like text or number
+   return {
+      type: 'TEXT',
+      props: {
+           nodeValue: node,
+           children: []
+      }
+   };
 }
 ```
 

manuscript/markup-in-javascript---jsx-.markua

@@ -1,4 +1,4 @@
-# Markup in JavaScript: `JSX`
+# Markup in JavaScript: JSX
 
 `createElement`, however, takes as input something that is probably not familiar to us since we usually work in JSX, which is the last element of the chain in this puzzle and the first step in solving it. While not strictly a part of React, it is almost universally used with it. And if we understand it then `createElement` will be less of a mystery since we will be able to connect all the dots. 
 
@@ -13,8 +13,8 @@ To start with, we need to create a data-structure -- let's call it JavaScript Ma
 {format: "html"}
 ```
 <div class="header">
-  <h1>Hello</h1>
-  <input type="submit" disabled />
+   <h1>Hello</h1>
+   <input type="submit" disabled />
 </div>
 ```
 
@@ -33,9 +33,9 @@ This is what I'm thinking:
 {format: "javascript", caption: "JSM - JavaScript Markup"}
 ```
 ['div', { 'className': 'header' },
-  [['h1', {}, ['Hello']],
-   ['input', { 'type': 'submit', 'disabled': 'disabled' }, []]
-  ]
+   [['h1', {}, ['Hello']],
+    ['input', { 'type': 'submit', 'disabled': 'disabled' }, []]
+   ]
 ]
 ```
 
@@ -52,12 +52,12 @@ There are three main differences between JSM and the real output of the JSX comp
 {format: "javascript"}
 ```
 React.createElement(
-  'div',
-  { className: 'header' },
-  React.createElement('h1', {}, 'Hello'),
-  React.createElement(
-    'input',
-    { type: 'submit', 'disabled': 'disabled' })
+   'div',
+   { className: 'header' },
+   React.createElement('h1', {}, 'Hello'),
+   React.createElement(
+      'input',
+      { type: 'submit', 'disabled': 'disabled' })
 );
 ```