docs: fix gutters, add toc to example (#1304)

packages/documentation/README.md

@@ -17,7 +17,7 @@ _Have another more specific idea? You may want to check out our vibrant collecti
 
     Use the Gatsby CLI to create a new site, specifying the default starter.
 
-    ```sh
+    ```bash
     # create a new Gatsby site using the default starter
     npx gatsby new my-default-starter
     ```
@@ -26,7 +26,7 @@ _Have another more specific idea? You may want to check out our vibrant collecti
 
     Navigate into your new site’s directory and start it up.
 
-    ```sh
+    ```bash
     cd my-default-starter/
     gatsby develop
     ```

packages/documentation/gatsby-config.js

@@ -29,7 +29,12 @@ module.exports = {
 		{
 			resolve: 'gatsby-transformer-remark',
 			options: {
-				plugins: ['gatsby-remark-copy-linked-files', 'gatsby-remark-prismjs'],
+				gfm: true,
+				plugins: [
+					`gatsby-remark-autolink-headers`,
+					'gatsby-remark-copy-linked-files',
+					'gatsby-remark-prismjs',
+				],
 			},
 		},
 

packages/documentation/markdown/docs/00 Quick Start/FAQ.md

@@ -47,7 +47,7 @@ When using [function components](https://facebook.github.io/react/docs/reusable-
 
 If you use a tool like [babel-react-optimize](https://github.com/jamiebuilds/babel-react-optimize#transform-react-pure-class-to-function) preset or [babel-plugin-transform-react-pure-class-to-function](https://github.com/jamiebuilds/babel-react-optimize/tree/master/packages/babel-plugin-transform-react-pure-class-to-function), then be aware that your class definition may implicitly be transformed into a function component, which may result in a null argument.
 
-```js
+```jsx
 import { DragSource } from 'react-dnd'
 import flow from 'lodash/flow'
 
@@ -65,7 +65,7 @@ export default flow(
 
 If you are using the [HTML5 backend](/docs//backends/html5), you can register a drop target for one of the `NativeTypes` it exports:
 
-```js
+```jsx
 import React from 'react'
 import { NativeTypes } from 'react-dnd-html5-backend'
 import { DropTarget } from 'react-dnd'

packages/documentation/markdown/docs/00 Quick Start/Overview.md

@@ -40,7 +40,7 @@ For each component that needs to track the drag and drop state, you can define a
 
 Let's say you want to highlight the Chess cells when a piece is being dragged. A collecting function for the `Cell` component might look like this:
 
-```js
+```jsx
 function collect(monitor) {
   return {
     highlighted: monitor.canDrop(),
@@ -57,7 +57,7 @@ If the backend handles the DOM events, but the components use React to describe
 
 In fact, a connector is passed as the first argument to the _collecting function_ we described above. Let's see how we can use it to specify the drop target:
 
-```js
+```jsx
 function collect(connect, monitor) {
   return {
     highlighted: monitor.canDrop(),
@@ -69,7 +69,7 @@ function collect(connect, monitor) {
 
 In the component's `render` method, we are then able to access both the data obtained from the monitor, and the function obtained from the connector:
 
-```js
+```jsx
 render() {
   const { highlighted, hovered, connectDropTarget } = this.props;
 
@@ -107,7 +107,7 @@ In React DnD, [`DragSource`](/docs/api/drag-source) and [`DropTarget`](/docs/api
 
 One caveat of using them is that they require _two_ function applications. For example, here's how to wrap `YourComponent` in a [`DragSource`](/docs/api/drag-source):
 
-```js
+```jsx
 import { DragSource } from 'react-dnd'
 
 class YourComponent {
@@ -119,7 +119,7 @@ export default DragSource(/* ... */)(YourComponent)
 
 Notice how, after specifying the [`DragSource`](/docs/api/drag-source) parameters in the first function call, there is a _second_ function call, where you finally pass your class. This is called [currying](http://en.wikipedia.org/wiki/Currying), or [partial application](http://en.wikipedia.org/wiki/Partial_application), and is necessary for the [decorator syntax](http://github.com/wycats/javascript-decorators) to work out of the box:
 
-```js
+```jsx
 import { DragSource } from 'react-dnd'
 
 @DragSource(/* ... */)
@@ -132,7 +132,7 @@ You don't have to use this syntax, but if you like it, you can enable it by tran
 
 Even if you don't plan to use decorators, the partial application can still be handy, because you can combine several [`DragSource`](/docs/api/drag-source) and [`DropTarget`](/docs/api/drop-target) declarations in JavaScript using a functional composition helper such as [`_.flow`](https://lodash.com/docs#flow). With decorators, you can just stack the decorators to achieve the same effect.
 
-```js
+```jsx
 import { DragSource, DropTarget } from 'react-dnd'
 import flow from 'lodash/flow'
 
@@ -156,7 +156,7 @@ export default flow(
 
 Below is an example of wrapping an existing `Card` component into a drag source.
 
-```js
+```jsx
 import React from 'react'
 import { DragSource } from 'react-dnd'
 

packages/documentation/markdown/docs/00 Quick Start/Testing.md

@@ -17,7 +17,7 @@ A few test examples are included with the React DnD inside its `examples` folder
 
 If you are only interested in testing the _rendering_ of your components in isolation, and not their interaction, you may use the `DecoratedComponent` static property available on any class wrapped with React DnD to access the original class. You may then test it with the different props without any dependency on React DnD, supplying an identity function to stub the connector methods.
 
-```js
+```jsx
 import React from 'react'
 import TestUtils from 'react-dom/test-utils'
 import expect from 'expect'
@@ -60,7 +60,7 @@ npm install --save-dev react-dnd-test-backend
 
 Here are some examples to get you started:
 
-```js
+```jsx
 import React from 'react'
 import { wrapInTestContext } from 'react-dnd-test-utils'
 import { DragDropContext } from 'react-dnd'
@@ -97,7 +97,7 @@ it('can be tested with the testing backend', () => {
 [Enzyme](https://github.com/airbnb/enzyme) is a commonly-used tool for testing React components.
 To use it with react-dnd, you'll need to call `.instance()` on `mount`-ed nodes to access the react-dnd helper methods:
 
-```js
+```jsx
 var root = Enzyme.mount(<BoxContext name="test" />)
 
 // ...

packages/documentation/markdown/docs/00 Quick Start/Troubleshooting.md

@@ -38,7 +38,7 @@ This problem may also appear if you have a duplicate React installation in your
 React DnD does not provide a [default export](http://www.2ality.com/2014/09/es6-modules-final.html).
 Mind the difference:
 
-```js
+```jsx
 // Wrong:
 import DragSource from 'react-dnd'
 
@@ -50,7 +50,7 @@ import { DragSource } from 'react-dnd'
 
 For the [`DragSource`](/docs/api/drag-source), [`DropTarget`](/docs/api/drop-target), [`DragLayer`](/docs/api/drag-layer), and the [`DragDropContext`](/docs/api/drag-drop-context), it is important that you first pass them the configuration arguments, and _then_ inject your React component in a second call.
 
-```js
+```jsx
 // Wrong:
 export default DragSource(YourComponent)(/* ... */);
 export default DragSource(YourComponent, /* ... */);