Changed highlight theme and updated snippet language (#1035)

* Changed highlight theme and updated snippet language

* Try switching theme to Monokai

docs/GettingStarted.md

@@ -19,7 +19,7 @@ npm install --save react-redux
 
 or
 
-```
+```bash
 yarn add react-redux
 ```
 
@@ -64,7 +64,7 @@ Correspondingly, the `connect` function takes two arguments, both optional:
 
 Normally, you’ll call `connect` in this way:
 
-```jsx
+```js
 const mapStateToProps = (state, ownProps) => ({
   // ... computed data from state and optionally ownProps
 });
@@ -185,7 +185,7 @@ Let’s work on `<AddTodo />` first. It needs to trigger changes to the `store`
 
 Our `addTodo` action creator looks like this:
 
-```JavaScript
+```js
 // redux/actions.js
 import { ADD_TODO } from './actionTypes';
 
@@ -203,7 +203,7 @@ export const addTodo = content => ({
 
 By passing it to `connect`, our component receives it as a prop, and it will automatically dispatch the action when it’s called.
 
-```jsx
+```js
 // components/AddTodo.js
 
 // ... other imports
@@ -277,7 +277,7 @@ The `<TodoList />` component is responsible for rendering the list of todos. The
 
 Our `<Todo />` component takes the todo item as props. We have this information from the `byIds` field of the `todos`. However, we also need the information from the `allIds` field of the store indicating which todos and in what order they should be rendered. Our `mapStateToProps` function may look like this:
 
-```jsx
+```js
 // components/TodoList.js
 
 // ...other imports
@@ -299,7 +299,7 @@ export default connect(mapStateToProps)(TodoList);
 
 Luckily we have a selector that does exactly this. We may simply import the selector and use it here.
 
-```jsx
+```js
 // redux/selectors.js
 
 export const getTodosState = store => store.todos;
@@ -318,7 +318,7 @@ export const getTodos = store =>
   getTodoList(store).map(id => getTodoById(store, id));
 ```
 
-```jsx
+```js
 // components/TodoList.js
 
 // ...other imports
@@ -354,7 +354,7 @@ If you call `connect` without providing any arguments, your component will:
 - _not_ re-render when the store changes
 - receive `props.dispatch` that you may use to manually dispatch action
 
-```jsx
+```js
 // ... Component
 export default connect()(Component); // Component will receive `dispatch` (just like our <TodoList />!)
 ```
@@ -366,7 +366,7 @@ If you call `connect` with only `mapStateToProps`, your component will:
 - subscribe to the values that `mapStateToProps` extracts from the store, and re-render only when those values have changed
 - receive `props.dispatch` that you may use to manually dispatch action
 
-```jsx
+```js
 // ... Component
 const mapStateToProps = state => state.partOfState;
 export default connect(mapStateToProps)(Component);
@@ -379,7 +379,7 @@ If you call `connect` with only `mapDispatchToProps`, your component will:
 - _not_ re-render when the store changes
 - receive each of the action creators you inject with `mapDispatchToProps` as props and automatically dispatch the actions upon being called
 
-```jsx
+```js
 import { addTodo } from "./actionCreators";
 // ... Component
 export default connect(
@@ -395,7 +395,7 @@ If you call `connect` with both `mapStateToProps` and `mapDispatchToProps`, your
 - subscribe to the values that `mapStateToProps` extracts from the store, and re-render only when those values have changed
 - receive all of the action creators you inject with `mapDispatchToProps` as props and automatically dispatch the actions upon being called.
 
-```jsx
+```js
 import * as actionCreators from "./actionCreators";
 // ... Component
 const mapStateToProps = state => state.partOfState;
@@ -415,7 +415,7 @@ Now let’s connect the rest of our `<TodoApp />`.
 
 How should we implement the interaction of toggling todos? A keen reader might already have an answer. If you have your environment set up and have followed through up until this point, now is a good time to leave it aside and implement the feature by yourself. There would be no surprise that we connect our `<Todo />` to dispatch `toggleTodo` in a similar way:
 
-```jsx
+```js
 // components/Todo.js
 
 // ... other imports
@@ -438,7 +438,7 @@ Finally, let’s implement our `VisibilityFilters` feature.
 
 The `<VisibilityFilters />` component needs to be able to read from the store which filter is currently active, and dispatch actions to the store. Therefore, we need to pass both a `mapStateToProps` and `mapDispatchToProps`. The `mapStateToProps` here can be a simple accessor of the `visibilityFilter` state. And the `mapDispatchToProps` will contain the `setFilter` action creator.
 
-```jsx
+```js
 // components/VisibilityFilters.js
 
 // ... other imports
@@ -479,7 +479,7 @@ export const getTodosByVisibilityFilter = (store, visibilityFilter) => {
 
 And connecting to the store with the help of the selector:
 
-```jsx
+```js
 // components/TodoList.js
 
 // ...

docs/api.md

@@ -23,7 +23,7 @@ If you *really* need to, you can manually pass `store` as a prop to every `conne
 
 #### Vanilla React
 
-```js
+```jsx
 ReactDOM.render(
   <Provider store={store}>
     <MyRootComponent />
@@ -34,7 +34,7 @@ ReactDOM.render(
 
 #### React Router
 
-```js
+```jsx
 ReactDOM.render(
   <Provider store={store}>
     <Router history={history}>
@@ -92,32 +92,33 @@ It does not modify the component class passed to it; instead, it *returns* a new
 #### The arity of mapStateToProps and mapDispatchToProps determines whether they receive ownProps
 
 > Note: `ownProps` **is not passed** to `mapStateToProps` and `mapDispatchToProps` if the formal definition of the function contains one mandatory parameter (function has length 1). For example, functions defined like below won't receive `ownProps` as the second argument.
-```javascript
+
+```js
 function mapStateToProps(state) {
   console.log(state); // state
   console.log(arguments[1]); // undefined
 }
 ```
-```javascript
+```js
 const mapStateToProps = (state, ownProps = {}) => {
   console.log(state); // state
   console.log(ownProps); // undefined
 }
 ```
 Functions with no mandatory parameters or two parameters **will receive** `ownProps`.
-```javascript
+```js
 const mapStateToProps = (state, ownProps) => {
   console.log(state); // state
   console.log(ownProps); // ownProps
 }
 ```
-```javascript
+```js
 function mapStateToProps() {
   console.log(arguments[0]); // state
   console.log(arguments[1]); // ownProps
 }
 ```
-```javascript
+```js
 const mapStateToProps = (...args) => {
   console.log(args[0]); // state
   console.log(args[1]); // ownProps
@@ -368,7 +369,7 @@ export default connect(mapStateToPropsFactory, mapDispatchToPropsFactory)(TodoAp
 
 ## connectAdvanced
 
-```
+```js
 connectAdvanced(selectorFactory, [connectOptions])
 ```
 
@@ -426,6 +427,7 @@ Returns the wrapped component instance. Only available if you pass `{ withRef: t
 #### Examples
 
 #### Inject `todos` of a specific user depending on props, and inject `props.userId` into the action
+
 ```js
 import * as actionCreators from './actionCreators'
 import { bindActionCreators } from 'redux'
@@ -448,7 +450,7 @@ export default connectAdvanced(selectorFactory)(TodoApp)
 
 ## createProvider
 
-```
+```js
 createProvider([storeKey])
 ```
 

docs/api/Provider.md

@@ -31,7 +31,7 @@ In the example below, the `<App />` component is our root-level component. This
 
 **Vanilla React Example**
 
-```js
+```jsx
     import React from 'react';
     import ReactDOM from 'react-dom';
     import { Provider } from 'react-redux';
@@ -52,7 +52,7 @@ In the example below, the `<App />` component is our root-level component. This
 
 **Usage with React Router**
 
-```js
+```jsx
     import React from 'react';
     import ReactDOM from 'react-dom';
     import { Provider } from 'react-redux';

docs/troubleshooting.md

@@ -28,7 +28,7 @@ If you’re using React Router 0.13, you might [bump into this problem](https://
 
 Root view:
 
-```js
+```jsx
 Router.run(routes, Router.HistoryLocation, (Handler, routerState) => { // note "routerState" here
   ReactDOM.render(
     <Provider store={store}>
@@ -62,7 +62,7 @@ The _best_ solution to this is to make sure that your components are pure and pa
 
 If that’s not practical for whatever reason (for example, if you’re using a library that depends heavily on React context), you may pass the `pure: false` option to `connect()`:
 
-```
+```js
 function mapStateToProps(state) {
   return { todos: state.todos }
 }

website/siteConfig.js

@@ -61,7 +61,7 @@ const siteConfig = {
 
   highlight: {
     // Highlight.js theme to use for syntax highlighting in code blocks.
-    theme: "default"
+    theme: "monokai"
   },
 
   // Add custom scripts here that would be placed in <script> tags.