Use Prism as syntax highlighter (#668)

* Use Prism as syntax highlighter

* Specify which languages should use Prism

* Add javascript to prism languages

docs/actionsheetios.md

@@ -33,15 +33,19 @@ The 'callback' function takes one parameter, the zero-based index of the selecte
 
 Minimal example:
 
-```
-ActionSheetIOS.showActionSheetWithOptions({
-  options: ['Cancel', 'Remove'],
-  destructiveButtonIndex: 1,
-  cancelButtonIndex: 0,
-},
-(buttonIndex) => {
-  if (buttonIndex === 1) { /* destructive action */ }
-});
+```javascript
+ActionSheetIOS.showActionSheetWithOptions(
+  {
+    options: ['Cancel', 'Remove'],
+    destructiveButtonIndex: 1,
+    cancelButtonIndex: 0,
+  },
+  (buttonIndex) => {
+    if (buttonIndex === 1) {
+      /* destructive action */
+    }
+  },
+);
 ```
 
 ---

docs/alert.md

@@ -44,18 +44,22 @@ Alternatively, the dismissing behavior can be disabled altogether by providing a
 
 Example usage:
 
-```
+```javascript
 // Works on both iOS and Android
 Alert.alert(
   'Alert Title',
   'My Alert Msg',
   [
     {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
-    {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
+    {
+      text: 'Cancel',
+      onPress: () => console.log('Cancel Pressed'),
+      style: 'cancel',
+    },
     {text: 'OK', onPress: () => console.log('OK Pressed')},
   ],
-  { cancelable: false }
-)
+  {cancelable: false},
+);
 ```
 
 ### Methods

docs/alertios.md

@@ -7,20 +7,15 @@ title: AlertIOS
 
 Creating an iOS alert:
 
-```
-AlertIOS.alert(
- 'Sync Complete',
- 'All your data are belong to us.'
-);
+```javascript
+AlertIOS.alert('Sync Complete', 'All your data are belong to us.');
 ```
 
 Creating an iOS prompt:
 
-```
-AlertIOS.prompt(
-  'Enter a value',
-  null,
-  text => console.log("You entered "+text)
+```javascript
+AlertIOS.prompt('Enter a value', null, (text) =>
+  console.log('You entered ' + text),
 );
 ```
 

docs/appstate.md

@@ -22,15 +22,14 @@ For more information, see [Apple's documentation](https://developer.apple.com/li
 
 To see the current state, you can check `AppState.currentState`, which will be kept up-to-date. However, `currentState` will be null at launch while `AppState` retrieves it over the bridge.
 
-```
-import React, {Component} from 'react'
-import {AppState, Text} from 'react-native'
+```javascript
+import React, {Component} from 'react';
+import {AppState, Text} from 'react-native';
 
 class AppStateExample extends Component {
-
   state = {
-    appState: AppState.currentState
-  }
+    appState: AppState.currentState,
+  };
 
   componentDidMount() {
     AppState.addEventListener('change', this._handleAppStateChange);
@@ -41,18 +40,18 @@ class AppStateExample extends Component {
   }
 
   _handleAppStateChange = (nextAppState) => {
-    if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
-      console.log('App has come to the foreground!')
+    if (
+      this.state.appState.match(/inactive|background/) &&
+      nextAppState === 'active'
+    ) {
+      console.log('App has come to the foreground!');
     }
     this.setState({appState: nextAppState});
-  }
+  };
 
   render() {
-    return (
-      <Text>Current state is: {this.state.appState}</Text>
-    );
+    return <Text>Current state is: {this.state.appState}</Text>;
   }
-
 }
 ```
 

docs/asyncstorage.md

@@ -13,25 +13,25 @@ The `AsyncStorage` JavaScript code is a simple facade that provides a clear Java
 
 Importing the `AsyncStorage` library:
 
-```
-import { AsyncStorage } from "react-native"
+```javascript
+import {AsyncStorage} from 'react-native';
 ```
 
 Persisting data:
 
-```
+```javascript
 _storeData = async () => {
   try {
     await AsyncStorage.setItem('@MySuperStore:key', 'I like to save it.');
   } catch (error) {
     // Error saving data
   }
-}
+};
 ```
 
 Fetching data:
 
-```
+```javascript
 _retrieveData = async () => {
   try {
     const value = await AsyncStorage.getItem('TASKS');
@@ -42,7 +42,7 @@ _retrieveData = async () => {
   } catch (error) {
     // Error retrieving data
   }
-}
+};
 ```
 
 ### Methods

docs/button.md

@@ -11,7 +11,7 @@ If this button doesn't look right for your app, you can build your own button us
 
 Example usage:
 
-```
+```javascript
 import { Button } from 'react-native';
 ...
 

docs/cameraroll.md

@@ -108,7 +108,7 @@ Returns a Promise which when resolved will be of the following shape:
 
 Loading images:
 
-```
+```javascript
 _handleButtonPress = () => {
    CameraRoll.getPhotos({
        first: 20,

docs/communication-android.md

@@ -19,7 +19,7 @@ Properties are the simplest way of cross-component communication. So we need a w
 
 You can pass properties down to the React Native app by providing a custom implementation of `ReactActivityDelegate` in your main activity. This implementation should override `getLaunchOptions` to return a `Bundle` with the desired properties.
 
-```
+```java
 public class MainActivity extends ReactActivity {
   @Override
   protected ReactActivityDelegate createReactActivityDelegate() {
@@ -39,26 +39,16 @@ public class MainActivity extends ReactActivity {
 }
 ```
 
-```
+```javascript
 import React from 'react';
-import {
-  AppRegistry,
-  View,
-  Image
-} from 'react-native';
+import {AppRegistry, View, Image} from 'react-native';
 
 class ImageBrowserApp extends React.Component {
   renderImage(imgURI) {
-    return (
-      <Image source={{uri: imgURI}} />
-    );
+    return <Image source={{uri: imgURI}} />;
   }
   render() {
-    return (
-      <View>
-        {this.props.images.map(this.renderImage)}
-      </View>
-    );
+    return <View>{this.props.images.map(this.renderImage)}</View>;
   }
 }
 
@@ -67,7 +57,7 @@ AppRegistry.registerComponent('AwesomeProject', () => ImageBrowserApp);
 
 `ReactRootView` provides a read-write property `appProperties`. After `appProperties` is set, the React Native app is re-rendered with new properties. The update is only performed when the new updated properties differ from the previous ones.
 
-```
+```java
 Bundle updatedProps = mReactRootView.getAppProperties();
 ArrayList<String> imageList = new ArrayList<String>(Arrays.asList(
         "http://foo.com/bar3.png",

docs/communication-ios.md

@@ -21,7 +21,7 @@ In order to embed a React Native view in a native component, we use `RCTRootView
 
 `RCTRootView` has an initializer that allows you to pass arbitrary properties down to the React Native app. The `initialProperties` parameter has to be an instance of `NSDictionary`. The dictionary is internally converted into a JSON object that the top-level JS component can reference.
 
-```
+```objectivec
 NSArray *imageList = @[@"http://foo.com/bar1.png",
                        @"http://foo.com/bar2.png"];
 
@@ -32,26 +32,16 @@ RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                           initialProperties:props];
 ```
 
-```
+```javascript
 import React from 'react';
-import {
-  AppRegistry,
-  View,
-  Image
-} from 'react-native';
+import {AppRegistry, View, Image} from 'react-native';
 
 class ImageBrowserApp extends React.Component {
   renderImage(imgURI) {
-    return (
-      <Image source={{uri: imgURI}} />
-    );
+    return <Image source={{uri: imgURI}} />;
   }
   render() {
-    return (
-      <View>
-        {this.props.images.map(this.renderImage)}
-      </View>
-    );
+    return <View>{this.props.images.map(this.renderImage)}</View>;
   }
 }
 
@@ -60,7 +50,7 @@ AppRegistry.registerComponent('AwesomeProject', () => ImageBrowserApp);
 
 `RCTRootView` also provides a read-write property `appProperties`. After `appProperties` is set, the React Native app is re-rendered with new properties. The update is only performed when the new updated properties differ from the previous ones.
 
-```
+```objectivec
 NSArray *imageList = @[@"http://foo.com/bar3.png",
                        @"http://foo.com/bar4.png"];
 
@@ -129,7 +119,7 @@ The simplest scenario is when we have a React Native app with a fixed size, whic
 
 For instance, to make an RN app 200 (logical) pixels high, and the hosting view's width wide, we could do:
 
-```
+```objectivec
 // SomeViewController.m
 
 - (void)viewDidLoad
@@ -156,7 +146,7 @@ In some cases we'd like to render content of initially unknown size. Let's say t
 
 `RCTRootView` supports 4 different size flexibility modes:
 
-```
+```objectivec
 // RCTRootView.h
 
 typedef NS_ENUM(NSInteger, RCTRootViewSizeFlexibility) {
@@ -173,7 +163,7 @@ typedef NS_ENUM(NSInteger, RCTRootViewSizeFlexibility) {
 
 Let's look at an example.
 
-```
+```objectivec
 // FlexibleSizeExampleView.m
 
 - (instancetype)initWithFrame:(CGRect)frame

docs/datepickerandroid.md

@@ -7,7 +7,7 @@ Opens the standard Android date picker dialog.
 
 ### Example
 
-```
+```javascript
 try {
   const {action, year, month, day} = await DatePickerAndroid.open({
     // Use `new Date()` for current date.

docs/datepickerios.md

@@ -7,24 +7,20 @@ Use `DatePickerIOS` to render a date/time picker (selector) on iOS. This is a co
 
 ### Example
 
-```
-import React, { Component } from 'react'
-import {
-  DatePickerIOS,
-  View,
-  StyleSheet,
-} from 'react-native'
+```javascript
+import React, {Component} from 'react';
+import {DatePickerIOS, View, StyleSheet} from 'react-native';
 
 export default class App extends Component {
   constructor(props) {
     super(props);
-    this.state = { chosenDate: new Date() };
+    this.state = {chosenDate: new Date()};
 
     this.setDate = this.setDate.bind(this);
   }
 
   setDate(newDate) {
-    this.setState({chosenDate: newDate})
+    this.setState({chosenDate: newDate});
   }
 
   render() {
@@ -35,16 +31,16 @@ export default class App extends Component {
           onDateChange={this.setDate}
         />
       </View>
-    )
+    );
   }
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
-})
+});
 ```
 
 <center><img src="/react-native/docs/assets/DatePickerIOS/example.gif" width="360"></img></center>

docs/drawerlayoutandroid.md

@@ -7,7 +7,7 @@ React component that wraps the platform `DrawerLayout` (Android only). The Drawe
 
 Example:
 
-```
+```javascript
 render: function() {
   var navigationView = (
     <View style={{flex: 1, backgroundColor: '#fff'}}>
@@ -160,11 +160,8 @@ Function called when the drawer state has changed. The drawer can be in 3 states
 
 Specifies the background color of the drawer. The default value is white. If you want to set the opacity of the drawer, use rgba. Example:
 
-```
-return (
-  <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)">
-  </DrawerLayoutAndroid>
-);
+```javascript
+return <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)" />;
 ```
 
 | Type               | Required |