[docs] Make code highlighting use dark theme in dark mode (mui#852)

* Fix improper dispaying of highlighted code, use current theme for highlighting

* Remove unused markup highlight syntax

docs/package.json

@@ -19,6 +19,7 @@
     "@types/react-jss": "^8.6.0",
     "@types/react-router": "^4.4.3",
     "@types/react-router-dom": "^4.3.1",
+    "@types/react-syntax-highlighter": "^10.1.0",
     "classnames": "^2.2.6",
     "date-fns": "^2.0.0-alpha.26",
     "formik": "^1.4.2",
@@ -28,7 +29,6 @@
     "material-ui-pickers-jalali-utils": "^0.4.3",
     "moment": "^2.23.0",
     "moment-jalaali": "^0.8.3",
-    "prismjs": "^1.15.0",
     "raw-loader": "^0.5.1",
     "react": "^16.7.0",
     "react-app-rewire-aliases": "^0.2.0",
@@ -38,6 +38,7 @@
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "react-scripts": "^2.1.3",
+    "react-syntax-highlighter": "^10.1.2",
     "typescript": "^3.2.2"
   },
   "scripts": {

docs/src/App.tsx

@@ -23,6 +23,8 @@ interface AppState {
   utils: UtilsLib;
 }
 
+export const ThemeContext = React.createContext<'light' | 'dark'>('light');
+
 class App extends React.Component<{}, AppState> {
   state: AppState = {
     direction: 'ltr',
@@ -62,15 +64,17 @@ class App extends React.Component<{}, AppState> {
     return (
       <MuiThemeProvider theme={this.createMuiTheme()}>
         <MuiPickersUtilsProvider utils={utilsMap[this.state.utils]}>
-          <UtilsServiceContextProvider value={createUtilsService(this.state.utils)}>
-            <Layout
-              toggleThemeType={this.toggleTheme}
-              toggleDirection={this.toggleDirection}
-              onChangeUtils={this.handleChangeUtils}
-            >
-              <Router />
-            </Layout>
-          </UtilsServiceContextProvider>
+          <ThemeContext.Provider value={this.state.theme}>
+            <UtilsServiceContextProvider value={createUtilsService(this.state.utils)}>
+              <Layout
+                toggleThemeType={this.toggleTheme}
+                toggleDirection={this.toggleDirection}
+                onChangeUtils={this.handleChangeUtils}
+              >
+                <Router />
+              </Layout>
+            </UtilsServiceContextProvider>
+          </ThemeContext.Provider>
         </MuiPickersUtilsProvider>
       </MuiThemeProvider>
     );

docs/src/Pages/GettingStarted/Installation.jsx

@@ -54,7 +54,7 @@ const Installation = () => (
       Note, that we support only 2.0.0-alpha versions of date-fns for now.
     </Typography>
 
-    <Code withMargin text={installLibCode} />
+    <Code withMargin language="markup" text={installLibCode} />
     <Typography variant="body1">
       Teach pickers how to use one of that library using
       <span className="inline-code">MuiPickersUtilsProvider</span>. This component takes an utils

docs/src/Pages/GettingStarted/QuickStart.example.jsx

@@ -20,9 +20,7 @@ export default class App extends PureComponent {
     return (
       <MuiPickersUtilsProvider utils={DateFnsUtils}>
         <DatePicker value={selectedDate} onChange={this.handleDateChange} />
-
         <TimePicker value={selectedDate} onChange={this.handleDateChange} />
-
         <DateTimePicker value={selectedDate} onChange={this.handleDateChange} />
       </MuiPickersUtilsProvider>
     );

docs/src/Pages/Localization/Persian/PersianCalendar.jsx

@@ -23,7 +23,7 @@ const PersianCalendar = () => (
       package from npm.
     </Typography>
 
-    <Code language="markup" text="npm install material-ui-pickers-jalali-utils" />
+    <Code text="npm install material-ui-pickers-jalali-utils" />
 
     <SourcablePanel
       title="Samples"