Merge branch 'feature/new-docs' of github.com:0xProject/0x-monorepo into feature/new-docs

packages/website/mdx/guides/integrate-instant.mdx

@@ -121,7 +121,7 @@ zeroExInstant.render(
 zeroExInstant.render(
     {
         orderSource: 'https://api.radarrelay.com/0x/v2/',
-        availableAssetDatas: ['0xf47261b0000000000000000000000000744d70fdbe2bc4cf95131626614a1764df805b9e],
+        availableAssetDatas: ['0xf47261b0000000000000000000000000744d70fdbe2bc4cf95131626614a1764df805b9e'],
         defaultSelectedAssetData: '0xf47261b0000000000000000000000000744d70fdbe2bc4cf95131626614a1764df805b9e',
     },
     'body',
@@ -383,7 +383,7 @@ There is a helper method available at `zeroExInstant.hasLiquidityForAssetDataAsy
 
 See below for an example of how to check liquidity on Radar Relay for a given ERC20 token address:
 
-```
+```html
 <div id="liquidityContainer">Loading...</div>
 <script>
     const erc20TokenAddress = '0xd26114cd6EE289AccF82350c8d8487fedB8A0C07';

packages/website/mdx/guides/web3-provider-explained.mdx

@@ -20,7 +20,7 @@ Providers can have much more complex behavior however, and [ProviderEngine](http
 
 We at 0x have put together a package of subproviders that we've needed ourselves. Our package also re-exports the `Web3ProviderEngine` from [ProviderEngine](https://github.com/MetaMask/provider-engine) so you only need to install a single package to get started. You can install it as follows:
 
-```
+```bash
 npm install @0x/subproviders --save
 ```
 
@@ -44,7 +44,7 @@ As described above, we at 0x have created a number of useful Web3 subproviders.
 
 You can install the 0x subproviders package as follows:
 
-```
+```bash
 npm install @0x/subproviders --save
 ```
 

packages/website/ts/components/docs/mdx/code.tsx

@@ -117,95 +117,98 @@ const style = {
         lineHeight: '1.5',
         padding: '20px',
     },
-    'hljs-comment': {
-        color: '#7e7887',
-    },
-    'hljs-quote': {
-        color: '#7e7887',
-    },
-    'hljs-variable': {
-        color: '#be4678',
-    },
-    'hljs-template-variable': {
-        color: '#be4678',
-    },
-    'hljs-attribute': {
-        color: '#be4678',
-    },
-    'hljs-regexp': {
-        color: '#be4678',
-    },
-    'hljs-link': {
-        color: '#be4678',
-    },
-    'hljs-tag': {
-        color: '#3E85DD',
-    },
-    'hljs-name': {
-        color: '#3E85DD',
-    },
-    'hljs-selector-id': {
-        color: '#be4678',
-    },
-    'hljs-selector-class': {
-        color: '#be4678',
-    },
-    'hljs-number': {
-        color: '#c994ff',
-    },
-    'hljs-meta': {
-        color: '#3E85DD',
-    },
-    'hljs-built_in': {
-        color: '#aa573c',
-    },
-    'hljs-builtin-name': {
-        color: '#aa573c',
+    'hljs-keyword': {
+        color: '#1C297D',
     },
     'hljs-literal': {
-        color: '#aa573c',
-    },
-    'hljs-type': {
-        color: '#aa573c',
-    },
-    'hljs-params': {
-        color: '#aa573c',
-    },
-    'hljs-string': {
-        color: '#781818',
-    },
-    'hljs-function': {
-        color: '#781818',
+        color: '#1C297D',
     },
     'hljs-symbol': {
-        color: '#2a9292',
+        color: '#1C297D',
     },
-    'hljs-bullet': {
-        color: '#2a9292',
+    'hljs-name': {
+        color: '#1C297D',
+    },
+    'hljs-link': {
+        color: '#1C297D',
+        textDecoration: 'underline',
+    },
+    'hljs-built_in': {
+        color: '#0E7C7B',
+    },
+    'hljs-type': {
+        color: '#0E7C7B',
+    },
+    'hljs-number': {
+        color: '#EA526F',
+    },
+    'hljs-class': {
+        color: '#EA526F',
+    },
+    'hljs-string': {
+        color: '#CD8987',
+    },
+    'hljs-meta-string': {
+        color: '#CD8987',
+    },
+    'hljs-regexp': {
+        color: '#9A5334',
+    },
+    'hljs-template-tag': {
+        color: '#9A5334',
+    },
+    'hljs-subst': {
+        color: '#12130F',
+    },
+    'hljs-function': {
+        color: '#12130F',
     },
     'hljs-title': {
-        color: '#576ddb',
+        color: '#12130F',
+    },
+    'hljs-params': {
+        color: '#12130F',
+    },
+    'hljs-formula': {
+        color: '#12130F',
+    },
+    'hljs-comment': {
+        color: '#6A8D73',
+        fontStyle: 'italic',
+    },
+    'hljs-quote': {
+        color: '#6A8D73',
+        fontStyle: 'italic',
+    },
+    'hljs-doctag': {
+        color: '#70967A',
+    },
+    'hljs-meta': {
+        color: '#AAABBC',
+    },
+    'hljs-meta-keyword': {
+        color: '#AAABBC',
+    },
+    'hljs-tag': {
+        color: '#AAABBC',
+    },
+    'hljs-variable': {
+        color: '#BD63C5',
+    },
+    'hljs-template-variable': {
+        color: '#BD63C5',
+    },
+    'hljs-attr': {
+        color: '#90BEDE',
+    },
+    'hljs-attribute': {
+        color: '#90BEDE',
+    },
+    'hljs-builtin-name': {
+        color: '#90BEDE',
     },
     'hljs-section': {
-        color: '#576ddb',
-    },
-    'hljs-keyword': {
-        color: '#253C90',
-    },
-    'hljs-selector-tag': {
-        color: '#253C90',
-    },
-    'hljs-deletion': {
-        color: '#19171c',
-        display: 'inline-block',
-        width: '100%',
-        backgroundColor: '#be4678',
-    },
-    'hljs-addition': {
-        color: '#19171c',
-        display: 'inline-block',
-        width: '100%',
-        backgroundColor: '#2a9292',
+        color: 'gold',
     },
     'hljs-emphasis': {
         fontStyle: 'italic',
@@ -213,4 +216,32 @@ const style = {
     'hljs-strong': {
         fontWeight: 'bold',
     },
+    'hljs-bullet': {
+        color: '#E4B363',
+    },
+    'hljs-selector-tag': {
+        color: '#E4B363',
+    },
+    'hljs-selector-id': {
+        color: '#E4B363',
+    },
+    'hljs-selector-class': {
+        color: '#E4B363',
+    },
+    'hljs-selector-attr': {
+        color: '#E4B363',
+    },
+    'hljs-selector-pseudo': {
+        color: '#E4B363',
+    },
+    'hljs-addition': {
+        backgroundColor: '#D5E2BC',
+        display: 'inline-block',
+        width: '100%',
+    },
+    'hljs-deletion': {
+        backgroundColor: '#EBB3A9',
+        display: 'inline-block',
+        width: '100%',
+    },
 };