docs fix (#164)

docs/language-docs.md

@@ -42,18 +42,17 @@ The settings are pretty simple; they just say there's something called xDim and
 
 
 
-
 ### GUI Elements
 
 The current user interface for Ivy features a number of different types of variables (and corresponding GUI widgets). These include:
 
 | Data Type  | Gui Component  |   
-|---|---|---|
-|  Field name From Dataset |  DataTarget |
-| Array of field names From Dataset |  MultiDataTarget |
-| Enum |  List |
-| Boolean |  Switch |
-| Number |  Slider |
+|---|---|   
+|  Field name From Dataset |  DataTarget |   
+| Array of field names From Dataset |  MultiDataTarget |   
+| Enum |  List |   
+| Boolean |  Switch |   
+| Number |  Slider |   
 | Text |  FreeText |
 
 From these basic components you can define a wide array of specific GUI behaviours. There are also a number of predefined widgets that can be helpful to use, such as DiscreteColorOptions which is a List that includes all of the basic discrete color schemes present in vega and vega-lite.

package.json

@@ -68,7 +68,7 @@
     "react-dropzone": "^11.0.1",
     "react-hotkeys": "^2.0.0",
     "react-icons": "^3.8.0",
-    "react-markdown": "^7.1.0",
+    "react-markdown": "^9.0.0",
     "react-monaco-editor": "^0.32.1",
     "react-redux": "^6.0.1",
     "react-router-dom": "^5.2.0",
@@ -78,6 +78,7 @@
     "reactour": "^1.18.0",
     "redux": "^4.0.1",
     "redux-thunk": "^2.2.0",
+    "remark-gfm": "^4.0.0",
     "styled-components": "^6.0.7",
     "type-analyzer": "^0.2.3",
     "unit-vis": "^0.0.4",
@@ -121,4 +122,4 @@
       "^react-dnd-test-utils$": "react-dnd-test-utils/dist/cjs"
     }
   }
-}
+}

src/containers/docs.tsx

@@ -4,6 +4,7 @@ import {connect} from 'react-redux';
 import ReactMarkdown from 'react-markdown';
 
 import * as actionCreators from '../actions/index';
+import remarkGfm from 'remark-gfm';
 import Header from '../components/header';
 
 // mock necessary for react markdown for some reason
@@ -26,7 +27,7 @@ export function DocsContainer(): JSX.Element {
     <div className="home-container">
       <Header />
       <div className="markdown-body home-container-contents-width-set">
-        {<ReactMarkdown>{docsText}</ReactMarkdown>}
+        {<ReactMarkdown remarkPlugins={[remarkGfm]}>{docsText}</ReactMarkdown>}
       </div>
     </div>
   );