.md files got modified

docs/explore-code.md

@@ -31,7 +31,8 @@ This is the bridge code to start react-360 executor. It runs a bridge in web wor
 **Important**
 
 `NonBlobBridge.js` doesn't exist in `react-360`(< 1.1.1), we were using an inline blob URL as the bridge code. But this may cause a security issue in the Chrome Browser that makes your app not work when hosted in a high secured CDN server. If you are using `react-360-cli`(>= 1.1.1), it will automatically use `NonBlobBridge.js` in the new project. If you have project created via `react-360-cli`(< 1.1.1), upgrading your `react-360` and `react-360-web` version won't break your app, and you can run the following code to migrate to use `NonBlobBridge.js`:
-```
+
+```bash
 node node_modules/react-360/scripts/install-bridge.js
 ```
 

docs/input-handling.md

@@ -10,7 +10,7 @@ Your users consume your experience through a variety of devices, each with its o
 
 The most common way for your user to interact with your app is through pressing a physical button: a keyboard key, a mouse click, a gamepad button, or something similar. React 360 is designed to collect input from a wide range of devices and send it to your React code in an easy-to-use format. When you create a new React 360 app, it is already configured to collect input from a mouse, a touchscreen, a keyboard, or a gamepad. To start handling events in React, add an onInput callback to one of your components. When the cursor is over your component and the user triggers an input event, it will be sent to that callback.
 
-```
+```js
 <View onInput={e => {
   const event = e.nativeEvent; // Extract the value from the runtime
   // event contains the actual event payload, as well as information on
@@ -30,7 +30,7 @@ Out of the box, React 360 supports collecting inputs from four common interfaces
 
 If you wanted to capture every time a confirm button was pressed down, it would be implemented as follows:
 
-```
+```js
 onInput={e => {
   const inputEvent = e.nativeEvent.inputEvent;
   if (inputEvent.action === 'down' && inputEvent.buttonClass === 'confirm') {

docs/photos-and-videos.md

@@ -63,7 +63,7 @@ For 360 image, React 360 currently support two different type of 360 photo layou
  - **Equirectangular**: Equirectangular photo uses equirectangular projection
  - **1x6 Cubic Format**: The 1x6 Cubic format is organized with 6 undistorted, perspective images on each direction in the order of `right, left, top, bottom, back, front` from top to bottom. 
 
- Equirectangular projection is more popular and is supported by most 360 camera. Cubic format provides better render quality as it suffers less distortion, but usually need to convert from an equirectangular projection source image. 
+ Equirectangular projection is more popular and is supported by most 360 camera. The Cubic format provides better render quality as it suffers less distortion, but usually need to convert from an equirectangular projection source image. 
 
 ### From React
 
@@ -81,7 +81,7 @@ Environment.setBackground(
 
 ## Displaying Videos
 
-Video are handled in two parts: first, the creation of a Video Player, and then mapping that player to your Environment. The separation of video playback from the environment itself allows you to control the progression of video from different locations in your codebase.
+Video is handled in two parts: first, the creation of a Video Player, and then mapping that player to your Environment. The separation of video playback from the environment itself allows you to control the progression of video from different locations in your codebase.
 
 Environment support two ways of rendering video:
  - 360 background video
@@ -91,7 +91,7 @@ Environment support two ways of rendering video:
 
 The video layout is similar as photo layout format. For 360 video, React 360 currently support **Equirectangular** and **3x2 Cubic Format with 1% expansion**.
 
- - **3x2 Cubic Format with 1% expansion**: Video image is divided to 3x2 image on the direction in the order of `right, left, top, bottom, front, back` from top-left to bottom-right. This format also has extra 1% expansion on the perspective projection of each image to reduce the texture rendering issue on the edge of each faces. You can try [Transform360](https://github.com/facebook/transform360) to create 3x2 cubic format 360 video. To use 3x2 cubic format video in React 360, you need to specify video layout format `layout: 'CUBEMAP_32',` in the VideoOption.
+ - **3x2 Cubic Format with 1% expansion**: The video image is divided into 3x2 image on the direction in the order of `right, left, top, bottom, front, back` from top-left to bottom-right. This format also has an extra 1% expansion on the perspective projection of each image to reduce the texture rendering issue on the edge of each faces. You can try [Transform360](https://github.com/facebook/transform360) to create 3x2 cubic format 360 video. To use 3x2 cubic format video in React 360, you need to specify video layout format `layout: 'CUBEMAP_32',` in the VideoOption.
 
 ### From the Runtime (client.js)
 

docs/runtime.md

@@ -24,13 +24,12 @@ Web Workers are a modern browser feature that allows code to run outside of the
 
 There may be times when your environment does not support Web Workers. While this is unlikely, we provide a workaround that simulates a separate execution environment via an `<iframe>`. To use this instead of a Web Worker, initialize a `ReactExecutorIframe` and supply it at initialization time.
 
-```
+```js
 import {ReactExecutorIframe} from 'react-360-web';
 
 const r360 = new ReactInstance(bundle, parent, {
   executor: new ReactExecutorIframe(),
   ...options,
 });
-
 ```
 

docs/surfaces.md

@@ -10,7 +10,7 @@ Surfaces allow you to add 2D interfaces in 3D space, letting you work in pixels
 
 A Cylinder Surface takes your 2D content and projects it onto the inside of a cylinder with a 4 meter radius. A cylinder is great for displaying 2D content, because no matter which way you turn, you are always looking at the content straight-on.
 
-```
+```js
 // To construct a new Cylinder Surface in your app runtime:
 import {Surface} from 'react-360-web';
 const myCylinderSurface = new Surface(
@@ -28,7 +28,7 @@ We recommend that you use a maximum Cylinder height of 720 – anything beyond t
 
 A Flat Surface places your 2D interface on a flat plane in space, like a virtual screen. Though a Cylinder Surface is always positioned in front of the user, a Flat Surface can be moved around in space – this is useful for scenarios where you want to have multiple panels arranged around the user, like a multi-monitor setup in virtual space.
 
-```
+```js
 // To construct a new Flat Surface in your app runtime:
 import {Surface} from 'react-360-web';
 const myFlatSurface = new Surface(
@@ -44,7 +44,7 @@ Flat Surfaces are positioned on the outside of an imaginary sphere, 4 meters in
  - `roll` - Rotate the surface itself
 The `roll` angle is optional, only use it if you have specific requirement such as making a billboard surface.
 
-```
+```js
 // To rotate a panel 90 degrees to your left:
 leftPanel.setAngle(
   -Math.PI / 2, /* yaw angle */
@@ -76,7 +76,7 @@ You can also use pass in a Quaternion of camera to re-center the surface on the
  - `yaw-pitch` - match both yaw and pitch angle of camera
  - `all` - match all angles of the camera
 
-```
+```js
 const cameraQuat = r360.getCameraQuaternion();
 subtitleSurface.recenter(cameraQuat, 'all');
 ```
@@ -85,13 +85,13 @@ subtitleSurface.recenter(cameraQuat, 'all');
 
 Surfaces are used to render the 2D interfaces of your app into 3D space. To attach a React component to a Surface, it must be registered with the AppRegistry. If you look at the bottom of your `index.js` file, you'll find a line that looks like the following:
 
-```
+```js
 AppRegistry.registerComponent('MyAppName', () => MyAppName);
 ```
 
 This tells the runtime that your component can be identified by this string ID. The corresponding code that attaches your React component to an application surface is found in `client.js`.
 
-```
+```js
 r360.renderToSurface(
   r360.createRoot('MyAppName'),
   r360.getDefaultSurface(),
@@ -118,7 +118,7 @@ s.resize(200, 200);
 
 There are times when you'll want to add multiple surfaces to your app, such as having a series of flat panels arranged around the user. If you register multiple React components with the AppRegistry, you can attach each one to a different surface. You can also mount multiple copies of the same component to different surfaces – useful when the rendering logic is identical, but the initial properties passed to each surface are different.
 
-```
+```js
 // Mounting different components to different surfaces
 r360.renderToSurface(
   r360.createRoot('ComponentOne'),
@@ -146,7 +146,7 @@ In this setup, how do you share data between the different React components? The
 
 You can detach the rendering of a root view from a surface:
 
-```
+```js
 // When calling renderToSurface, it will return a tag for the root view
 const root1 = r360.renderToSurface(
   r360.createRoot('Root1'),

docs/what-is.md

@@ -10,13 +10,13 @@ React 360 is a framework for the creation of 3D and VR user interfaces. Built on
 
 ### What is it for?
 
-React 360 is optimized for the creation of user interfaces that power rich multimedia experiences. It provides the tools necessary to to create high-quality interfaces and delivers a strong foundation for applications built around 360 and 3D content. The techniques and tools used in React 360 are similar to the ones used by Oculus and Facebook when developing their VR applications on mobile and PC platforms, and are the result of years of research into best practices.
+React 360 is optimized for the creation of user interfaces that power rich multimedia experiences. It provides the tools necessary to create high-quality interfaces and delivers a strong foundation for applications built around 360 and 3D content. The techniques and tools used in React 360 are similar to the ones used by Oculus and Facebook when developing their VR applications on mobile and PC platforms, and are the result of years of research into best practices.
 
 React 360 is about bringing interactivity into 360 spaces. Applications that combine 2D or 3D interfaces are easily within your reach. Photo and video viewers, 360 tours, classic adventure games, and 3D board games are all examples of things that have been built with React 360 so far.
 
 ### How is React 360 Different from React VR?
 
-In early 2017, Facebook and Oculus released a JavaScript library called “React VR,” which was designed for the creation of 3D and VR experiences in the web browser. At the same time, Oculus began using a native C++ version of the framework to build its own first-party apps. Over time, the APIs of the two projects diverged as we addressed the different needs of the frameworks. To avoid confusion between the two systems, the open source framework has been renamed “React 360,” which better reflects its use case: the creation of immersive 360 experiences that can be consumed across PC, Mobile, and VR devices.
+In early 2017, Facebook and Oculus released a JavaScript library called “React VR,” which was designed for the creation of 3D and VR experiences in the web browser. At the same time, Oculus began using a native C++ version of the framework to build its own first-party apps. Over time, the APIs of the two projects diverged as we addressed the different needs of the frameworks. To avoid confusion between the two systems, the open-source framework has been renamed “React 360,” which better reflects its use case: the creation of immersive 360 experiences that can be consumed across PC, Mobile, and VR devices.
 
 If you previously used React VR, you should find React 360 to be very similar. We've simplified a lot of the more common workflows, such as placing 2D UI elements in 3D space, and optimized performance for these use cases. If you want to migrate a legacy React VR app over to use the new tools, follow [this guide](/react-360/docs/from-react-vr.html).
 
@@ -30,4 +30,4 @@ Trying to figure out which framework is right for you? Here's a quick test. If y
 
 Three.js is a library for 3D rendering in the web browser. It's a much lower-level tool than React 360, and requires control of raw 3D meshes and textures. React 360 is designed to hide much of this from you unless it's needed, so that you can focus on the behavior and appearance of your application.
 
-Currently, React 360 relies on Three.js for some of its rendering work. However we are opening up the relevant APIs so that React 360 developers may soon be able to use the 3D rendering library of their choice, including raw WebGL calls.
+Currently, React 360 relies on Three.js for some of its rendering work. However, we are opening up the relevant APIs so that React 360 developers may soon be able to use the 3D rendering library of their choice, including raw WebGL calls.