From c0cf90f06b6c7b7ef8c2176efe6978d94702bd26 Mon Sep 17 00:00:00 2001
From: itelofh <itelofilho@gmail.com>
Date: Mon, 30 Jul 2018 14:56:47 -0300
Subject: [PATCH] [docs] Add markdown code to Interactive Grid (#12333)

---
 docs/src/pages/layout/grid/InteractiveGrid.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/docs/src/pages/layout/grid/InteractiveGrid.js b/docs/src/pages/layout/grid/InteractiveGrid.js
index b5412ce92f710d..020e5680af7e63 100644
--- a/docs/src/pages/layout/grid/InteractiveGrid.js
+++ b/docs/src/pages/layout/grid/InteractiveGrid.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
+import MarkdownElement from '@material-ui/docs/MarkdownElement';
 import Grid from '@material-ui/core/Grid';
 import FormControl from '@material-ui/core/FormControl';
 import FormLabel from '@material-ui/core/FormLabel';
@@ -42,6 +43,18 @@ class InteractiveGrid extends React.Component {
   render() {
     const { classes } = this.props;
     const { alignItems, direction, justify } = this.state;
+
+    const code = `
+\`\`\`jsx
+<Grid
+  container
+  direction="${direction}"
+  justify="${justify}"
+  alignItems="${alignItems}"
+>
+\`\`\`
+`;
+
     return (
       <Grid container className={classes.root}>
         <Grid item xs={12}>
@@ -141,6 +154,9 @@ class InteractiveGrid extends React.Component {
             </Grid>
           </Paper>
         </Grid>
+        <Grid item xs={12}>
+          <MarkdownElement text={code} />
+        </Grid>
       </Grid>
     );
   }