Allow to use custom language in code snippets

Author: rvsia

packages/react-renderer-demo/src/app/pages/renderer/development-setup.md

@@ -11,13 +11,13 @@ Data Driven Forms is a monorepo which uses [Lerna](https://github.com/lerna/lern
 
 ## Install
 
-```console
+```sh
 yarn install
 ```
 
 ## Build
 
-```console
+```sh
 yarn build
 ```
 
@@ -29,7 +29,7 @@ Don't forget to build all packages, which are linked together!
 
 Each package has a small playground `package/demo`, where you can test your changes.
 
-```console
+```sh
 cd packages/pf3-component-mapper
 yarn start
 ```
@@ -38,14 +38,14 @@ yarn start
 
 The documentation is a server-side rendered React application based on [NextJS framework](https://nextjs.org/).
 
-```console
+```sh
 cd packages/react-renderer-demo
 yarn dev
 ```
 
 ## How to clean?
 
-```console
+```sh
 rm yarn.lock
 yarn lerna clean # will delete all node_modules
 ```
@@ -54,7 +54,7 @@ yarn lerna clean # will delete all node_modules
 
 Tests needed to be run from the core folder.
 
-```console
+```sh
 yarn test
 
 yarn test packages/pf3-component-mapper

packages/react-renderer-demo/src/app/pages/renderer/installation.md

@@ -7,11 +7,11 @@ import ListOfContents from '../../src/helpers/list-of-contents';
 
 # Installation
 
-```console
+```sh
 npm install --save @data-driven-forms/react-form-renderer
 ```
 or
-```console
+```sh
 yarn add @data-driven-forms/react-form-renderer
 ```
 

packages/react-renderer-demo/src/app/src/components/code-editor/index.js

@@ -12,7 +12,6 @@ import 'brace/theme/tomorrow_night';
 const CodeEditor = (props) => (
   <AceEditor
     readOnly
-    mode={typeof language === 'string' ? props.language && props.language.toLowerCase() : 'jsx'}
     theme="tomorrow_night"
     name="UNIQUE_ID_OF_DIV"
     editorProps={{ $blockScrolling: true }}

packages/react-renderer-demo/src/app/src/components/mdx/mdx-components.js

@@ -64,32 +64,36 @@ const MdxComponents = {
       {children}
     </Typography>
   ),
-  code: ({ children, lang }) => (
-    <div style={{ background: '#1d1f21', paddingTop: 5, paddingBottom: 5, marginTop: 10, marginBottom: 10 }} className="DocCode">
-      <CodeEditor
-        readOnly
-        mode={typeof lang === 'string' ? lang.toLowerCase() : 'jsx'}
-        theme="tomorrow_night"
-        name="UNIQUE_ID_OF_DIV"
-        editorProps={{ $blockScrolling: true }}
-        value={children.replace(/\n+$/, '')}
-        fontSize={14}
-        maxLines={Infinity}
-        showPrintMargin={false}
-        showGutter={false}
-        highlightActiveLine={false}
-        style={{ width: '80%', margin: 10 }}
-        setOptions={{
-          showLineNumbers: false,
-          readOnly: true
-        }}
-        onLoad={(editor) => {
-          editor.getSession().setUseWorker(false);
-          editor.renderer.$cursorLayer.element.style.display = 'none';
-        }}
-      />
-    </div>
-  ),
+  code: ({ children, className }) => {
+    const lang = className ? className.toLowerCase().replace('language-', '') : '';
+
+    return (
+      <div style={{ background: '#1d1f21', paddingTop: 5, paddingBottom: 5, marginTop: 10, marginBottom: 10 }} className="DocCode">
+        <CodeEditor
+          readOnly
+          mode={lang ? lang : 'jsx'}
+          theme="tomorrow_night"
+          name="UNIQUE_ID_OF_DIV"
+          editorProps={{ $blockScrolling: true }}
+          value={children.replace(/\n+$/, '')}
+          fontSize={14}
+          maxLines={Infinity}
+          showPrintMargin={false}
+          showGutter={false}
+          highlightActiveLine={false}
+          style={{ width: '80%', margin: 10 }}
+          setOptions={{
+            showLineNumbers: false,
+            readOnly: true
+          }}
+          onLoad={(editor) => {
+            editor.getSession().setUseWorker(false);
+            editor.renderer.$cursorLayer.element.style.display = 'none';
+          }}
+        />
+      </div>
+    );
+  },
   a: ({ href, children }) =>
     href.startsWith('/') ? (
       <RouterLink href={href}>