From cfe3287e9ea3c4a1c948e7c0119ee3a6036ac223 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 16 Jul 2019 16:17:34 +0200
Subject: [PATCH] switch syntax highlighting

---
 content/test.md                             |  16 +-
 content/tutorials/react-get-use-data-set.md |  15 +-
 content/tutorials/react-publish-data-set.md |  15 +-
 content/tutorials/react-setup.md            |  74 ++++++---
 gatsby-browser.js                           |   3 -
 gatsby-config.js                            |  12 +-
 package.json                                |   4 +-
 src/components/DocContent.module.scss       |  39 -----
 src/styles/_code.scss                       | 161 ++++++++++++++++++++
 src/styles/_variables.scss                  |   2 +
 src/styles/global.scss                      |  58 +------
 11 files changed, 249 insertions(+), 150 deletions(-)
 create mode 100644 src/styles/_code.scss

diff --git a/content/test.md b/content/test.md
index 98734309..da9d2a2e 100644
--- a/content/test.md
+++ b/content/test.md
@@ -283,12 +283,12 @@ You can also use raw HTML in your Markdown, and it'll mostly work pretty well.
 ## Horizontal Rule
 
 ```text
-Hypens
+Hyphens
 ---
 Hyphens
 ```
 
-Hypens
+Hyphens
 
 ---
 
@@ -300,13 +300,13 @@ My basic recommendation for learning how line breaks work is to experiment and d
 
 Here are some things to try out:
 
-```text
+```markdown
 Here's a line for us to start with.
 
-This line is separated from the one above by two newlines, so it will be a *separate paragraph*.
+This line is separated from the one above by two newlines, so it will be a _separate paragraph_.
 
 This line is also a separate paragraph, but...
-This line is only separated by a single newline, so it's a separate line in the *same paragraph*.
+This line is only separated by a single newline, so it's a separate line in the _same paragraph_.
 ```
 
 Here's a line for us to start with.
@@ -322,7 +322,7 @@ This line is only separated by a single newline, so it's a separate line in the
 
 Videos can be embedded like so, works with YouTube, Vimeo, VideoPress, Twitch:
 
-```text
+```markdown
 `video: https://www.youtube.com/watch?v=6YRmyUZr2No`
 ```
 
@@ -351,7 +351,7 @@ You can also add an image with a link to the video like this:
 
 Or, in pure Markdown, but losing the image sizing and border:
 
-```md
+```markdown
 [![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)
 ```
 
@@ -385,7 +385,7 @@ Resulting in:
 
 You can embed any file contents like so, note that the language needs to be defined manually to get proper syntax highlighting:
 
-```text
+```markdown
 GITHUB-EMBED https://github.com/oceanprotocol/squid-js/blob/develop/src/keeper/Web3Provider.ts js GITHUB-EMBED
 ```
 
diff --git a/content/tutorials/react-get-use-data-set.md b/content/tutorials/react-get-use-data-set.md
index 43bbf12e..b37dc1c0 100644
--- a/content/tutorials/react-get-use-data-set.md
+++ b/content/tutorials/react-get-use-data-set.md
@@ -16,8 +16,7 @@ Open `src/App.js` from your `marketplace/` folder.
 
 In the previous tutorial we added asset publishing. We can now search for published assets for consumption. Just after the `submitAsset()` function we can add a new function that will handle search:
 
-```js
-// src/App.js
+```js:title=src/App.js
 // ...
 async retrieveAssets() {
   this.search = await this.ocean.assets.search('10 Monkey Species Small')
@@ -31,8 +30,7 @@ async retrieveAssets() {
 
 Now we need a button to start our search inside the render function just after `<button onClick={() => this.submitAsset()}>Register asset</button>`:
 
-```jsx
-// src/App.js
+```jsx:title=src/App.js
 // ...
 <button onClick={() => this.retrieveAssets()}>Retrieve assets</button>
 // ...
@@ -44,8 +42,7 @@ Consuming means downloading one or multiple files attached to an asset. During t
 
 With the following code we start the consume process with the first search result, then go on to download its first attached file. Put it after the `retrieveAssets()` function:
 
-```js
-// src/App.js
+```js:title=src/App.js
 // ...
 async consumeAsset() {
   // get all accounts
@@ -75,8 +72,7 @@ async consumeAsset() {
 
 We still need a button to start consumption. In the render function, just after the `<button onClick={()=>this.retrieveAssets()}>Retrieve assets</button>` line, add:
 
-```jsx
-// src/App.js
+```jsx:title=src/App.js
 // ...
 <button onClick={() => this.consumeAsset()}>Consume asset</button>
 // ...
@@ -98,8 +94,7 @@ Have a look into `console.log` to see the various steps of the search and consum
 
 Here is the full source of `src/App.js` that you should have if you followed this tutorial:
 
-```jsx
-// src/App.js
+```jsx:title=src/App.js
 import React, { Component } from 'react'
 import './App.css'
 import { Ocean } from '@oceanprotocol/squid'
diff --git a/content/tutorials/react-publish-data-set.md b/content/tutorials/react-publish-data-set.md
index 97c6c48e..31622b00 100644
--- a/content/tutorials/react-publish-data-set.md
+++ b/content/tutorials/react-publish-data-set.md
@@ -19,8 +19,7 @@ To do that, we need to define the asset based on the [OEP-08](https://github.com
 
 Let's create a new file `src/asset.js` and fill it with:
 
-```js
-// src/asset.js
+```js:title=src/asset.js
 const asset = {
   base: {
     name: '10 Monkey Species Small',
@@ -94,8 +93,7 @@ export default asset
 
 Then import this asset definition at the top of `src/App.js`:
 
-```js
-// src/App.js
+```js:title=src/App.js
 // ...
 import asset from './asset'
 // ...
@@ -105,8 +103,7 @@ import asset from './asset'
 
 Now that we have an asset to submit, we need a function to handle it. Just before `render() {` let's add this function:
 
-```jsx
-// src/App.js
+```jsx:title=src/App.js
 // ...
 async submitAsset() {
   const accounts = await this.ocean.accounts.list()
@@ -122,8 +119,7 @@ async submitAsset() {
 
 The last thing we need is a button to start our registration inside the render function just after `<h1>Marketplace app</h1>`:
 
-```jsx
-// src/App.js
+```jsx:title=src/App.js
 // ...
 <button onClick={() => this.submitAsset()}>Register asset</button>
 // ...
@@ -139,8 +135,7 @@ Have a look into `console.log` to see the various steps of the register process.
 
 Here is the full source of `src/App.js` that you should have if you followed this tutorial:
 
-```jsx
-// src/App.js
+```jsx:title=src/App.js
 import React, { Component } from 'react'
 import './App.css'
 import { Ocean } from '@oceanprotocol/squid'
diff --git a/content/tutorials/react-setup.md b/content/tutorials/react-setup.md
index f802e8ef..30025a65 100644
--- a/content/tutorials/react-setup.md
+++ b/content/tutorials/react-setup.md
@@ -53,8 +53,7 @@ At this point you can already run `npm start` which starts the app in your brows
 
 Let's make it ours, open `src/App.js` and replace the whole source with:
 
-```jsx
-// src/App.js
+```jsx:title=src/App.js
 import React, { Component } from 'react'
 import './App.css'
 
@@ -73,13 +72,26 @@ export default App
 
 Below the `import './App.css'` line, let's import the packages we installed, set up web3 and unlock MetaMask accounts (if locked):
 
-```js
-// src/App.js
+```jsx{3-7}:title=src/App.js
+import React, { Component } from 'react'
+import './App.css'
 import { Ocean } from '@oceanprotocol/squid'
 import Web3 from 'web3'
 
 const web3 = new Web3(window.web3.currentProvider)
 window.ethereum.enable()
+
+class App extends Component {
+  render() {
+    return (
+      <div className="App App-header">
+        <h1>Marketplace app</h1>
+      </div>
+    )
+  }
+}
+
+export default App
 ```
 
 After those steps you should see this, and MetaMask should have asked you to allow access to your account:
@@ -87,30 +99,47 @@ After those steps you should see this, and MetaMask should have asked you to all
 ![React App 02](images/react-app-02.png)
 ![React App 03](images/react-app-03.png)
 
-> Note: If you see an error like `inpage.js:1 MetaMask - RPC Error: Internal JSON-RPC error.` in your `console.log`, don't worry about it. It's a MetaMask thing.
+> Note: If you see an error like `inpage.js:1 MetaMask - RPC Error: Internal JSON-RPC error.` in your browser console, don't worry about it. It's a MetaMask thing.
 
 ## Create Ocean Instance
 
 Now that we are successfully connected with Web3, we can set up our Ocean instance.
 
-At the beginning of your component (i.e. right after the `class App extends Component {` line), create a new Ocean instance with all configuration within the `componentDidMount` lifecycle method. All Ocean Protocol operations can be executed from this Ocean instance.
+At the beginning of your component , create a new Ocean instance with all configuration within the `componentDidMount` lifecycle method. All Ocean Protocol operations can be executed from this Ocean instance.
 
-```js
-// src/App.js
-//...
-async componentDidMount() {
-  this.ocean = await new Ocean.getInstance({
-    web3Provider: web3,
-    nodeUri: 'http://localhost:8545',
-    aquariusUri: 'http://localhost:5000',
-    brizoUri: 'http://localhost:8030',
-    brizoAddress: '0x00bd138abd70e2f00903268f3db08f2d25677c9e',
-    parityUri: 'http://localhost:8545',
-    secretStoreUri: 'http://localhost:12001'
-  })
-  console.log('Finished loading contracts.')
+```jsx{10-21}:title=src/App.js
+import React, { Component } from 'react'
+import './App.css'
+import { Ocean } from '@oceanprotocol/squid'
+import Web3 from 'web3'
+
+const web3 = new Web3(window.web3.currentProvider)
+window.ethereum.enable()
+
+class App extends Component {
+  async componentDidMount() {
+    this.ocean = await new Ocean.getInstance({
+      web3Provider: web3,
+      nodeUri: 'http://localhost:8545',
+      aquariusUri: 'http://localhost:5000',
+      brizoUri: 'http://localhost:8030',
+      brizoAddress: '0x00bd138abd70e2f00903268f3db08f2d25677c9e',
+      parityUri: 'http://localhost:8545',
+      secretStoreUri: 'http://localhost:12001'
+    })
+    console.log('Finished loading contracts.')
+  }
+
+  render() {
+    return (
+      <div className="App App-header">
+        <h1>Marketplace app</h1>
+      </div>
+    )
+  }
 }
-//...
+
+export default App
 ```
 
 ## Final Result
@@ -121,8 +150,7 @@ That's it, if you have no errors in your `console.log` then you have successfull
 
 Here is the full source of `src/App.js` that you should have if you followed this tutorial:
 
-```jsx
-// src/App.js
+```jsx:title=src/App.js
 import React, { Component } from 'react'
 import './App.css'
 import { Ocean } from '@oceanprotocol/squid'
diff --git a/gatsby-browser.js b/gatsby-browser.js
index ad8ec190..c40415d9 100755
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@@ -1,9 +1,6 @@
 // import global branding styles
 import './src/styles/global.scss'
 
-// import prismjs syntax highlighting styles
-import 'prismjs/themes/prism-okaidia.css'
-
 // IntersectionObserver polyfill for gatsby-image (Safari, IE)
 if (typeof window.IntersectionObserver === 'undefined') {
     import('intersection-observer')
diff --git a/gatsby-config.js b/gatsby-config.js
index 5c3ca3b6..b809141f 100755
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -93,8 +93,18 @@ module.exports = {
                     'gatsby-remark-smartypants',
                     'gatsby-remark-embed-video',
                     'gatsby-remark-responsive-iframe',
-                    'gatsby-remark-prismjs',
                     'gatsby-remark-autolink-headers',
+                    'gatsby-remark-code-titles',
+                    {
+                        // https://github.com/andrewbranch/gatsby-remark-vscode
+                        resolve: 'gatsby-remark-vscode',
+                        options: {
+                            colorTheme: 'Quiet Light',
+                            injectStyles: false,
+                            extensions: [],
+                            languageAliases: { text: 'log' }
+                        }
+                    },
                     'gatsby-remark-copy-linked-files',
                     {
                         resolve: 'gatsby-remark-component',
diff --git a/package.json b/package.json
index b0b20464..24d7de83 100644
--- a/package.json
+++ b/package.json
@@ -37,14 +37,15 @@
     "gatsby-plugin-sitemap": "^2.2.3",
     "gatsby-plugin-svgr": "^2.0.2",
     "gatsby-remark-autolink-headers": "^2.1.3",
+    "gatsby-remark-code-titles": "^1.1.0",
     "gatsby-remark-component": "^1.1.3",
     "gatsby-remark-copy-linked-files": "^2.1.3",
     "gatsby-remark-embed-video": "^1.7.1",
     "gatsby-remark-github": "^2.0.0",
     "gatsby-remark-images": "^3.1.6",
-    "gatsby-remark-prismjs": "^3.3.3",
     "gatsby-remark-responsive-iframe": "^2.2.4",
     "gatsby-remark-smartypants": "^2.1.2",
+    "gatsby-remark-vscode": "^1.0.6",
     "gatsby-source-filesystem": "^2.1.5",
     "gatsby-source-graphql": "^2.1.2",
     "gatsby-transformer-remark": "^2.6.6",
@@ -53,7 +54,6 @@
     "gatsby-transformer-yaml": "^2.2.3",
     "giphy-js-sdk-core": "^1.0.6",
     "intersection-observer": "^0.7.0",
-    "prismjs": "^1.16.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-helmet": "^5.2.1",
diff --git a/src/components/DocContent.module.scss b/src/components/DocContent.module.scss
index 11287405..3f896aa2 100644
--- a/src/components/DocContent.module.scss
+++ b/src/components/DocContent.module.scss
@@ -27,45 +27,6 @@
         word-wrap: normal;
         word-break: normal;
     }
-    // stylelint-disable selector-no-qualifying-type, declaration-no-important
-    a > code {
-        color: $brand-pink !important;
-    }
-
-    :not(pre) > code,
-    :not(pre) > code[class*='language-'] {
-        background: darken($brand-white, 5%);
-        color: $brand-grey-dark;
-        display: inline-block;
-        padding-left: .3rem;
-        padding-right: .3rem;
-        overflow-wrap: break-word;
-        word-wrap: break-word;
-        word-break: break-all;
-    }
-    // stylelint-enable selector-no-qualifying-type, declaration-no-important
-
-    pre {
-        display: block;
-        margin-bottom: $spacer;
-        padding: 0;
-        background: $brand-black;
-
-        // make 'em scrollable
-        overflow: auto;
-        -webkit-overflow-scrolling: touch;
-
-        code {
-            padding: $spacer;
-            white-space: pre;
-            display: block;
-            color: $brand-grey-lighter;
-            overflow-wrap: normal;
-            word-wrap: normal;
-            word-break: normal;
-            overflow: auto;
-        }
-    }
 }
 
 .empty {
diff --git a/src/styles/_code.scss b/src/styles/_code.scss
new file mode 100644
index 00000000..2f95643e
--- /dev/null
+++ b/src/styles/_code.scss
@@ -0,0 +1,161 @@
+// stylelint-disable selector-no-qualifying-type, selector-no-vendor-prefix, declaration-no-important
+
+@import 'variables';
+
+code,
+kbd,
+pre,
+samp {
+    font-family: $font-family-monospace;
+    font-size: $font-size-small;
+    border-radius: $border-radius;
+    background: lighten($brand-grey-light, 35%);
+    color: $brand-grey;
+    text-shadow: none;
+
+    h1 &,
+    h2 &,
+    h3 &,
+    h4 &,
+    h5 & {
+        font-size: inherit;
+    }
+}
+
+:not(pre) > code {
+    display: inline-block;
+    padding-left: .3rem;
+    padding-right: .3rem;
+}
+
+a > code {
+    color: $brand-pink;
+}
+
+pre {
+    display: block;
+    margin: 0;
+    margin-bottom: $spacer;
+    padding: 0;
+    position: relative;
+    background: lighten($brand-grey-light, 35%) !important;
+
+    // make 'em scrollable
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    max-height: 800px;
+
+    code {
+        background: none;
+        padding: $spacer / 1.5;
+        white-space: pre;
+        display: block;
+        color: $brand-grey;
+        overflow-wrap: normal;
+        word-wrap: normal;
+        word-break: normal;
+        float: left;
+        width: 100%;
+    }
+}
+
+pre[data-language]:before {
+    background: $brand-grey-lighter;
+    border-radius: 0 0 $border-radius $border-radius;
+    color: $brand-grey;
+    font-size: $font-size-mini;
+    font-family: $font-family-monospace;
+    letter-spacing: .05em;
+    line-height: 1;
+    padding: .25rem .5rem;
+    position: absolute;
+    right: $spacer / 2;
+    top: 0;
+}
+
+pre[data-language='js']:before {
+    content: 'js';
+}
+
+pre[data-language='jsx']:before {
+    content: 'jsx';
+}
+
+pre[data-language='bash'] {
+    &:before {
+        content: 'bash';
+    }
+
+    .vscode-highlight-line:only-child {
+        padding-left: .5rem;
+        display: block;
+
+        &:before {
+            content: '$';
+            opacity: .5;
+            display: inline-block;
+            margin-left: -.5rem;
+            margin-right: .5rem;
+        }
+    }
+}
+
+pre[data-language='html']:before {
+    content: 'html';
+}
+
+pre[data-language='css']:before {
+    content: 'css';
+}
+
+pre[data-language='php']:before {
+    content: 'php';
+}
+
+pre[data-language='python']:before {
+    content: 'python';
+}
+
+pre[data-language='java']:before {
+    content: 'java';
+}
+
+pre[data-language='markdown']:before {
+    content: 'markdown';
+}
+
+.gatsby-code-title {
+    background: lighten($brand-grey-light, 35%);
+    padding: $spacer / 4 $spacer / 2;
+    border-bottom: 1px solid $brand-white;
+    font-family: $font-family-monospace;
+    color: $brand-grey-light;
+    font-size: $font-size-small;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+}
+
+.vscode-highlight-line {
+    display: inline-block;
+
+    &.vscode-highlight-line-highlighted {
+        background-color: lighten($brand-grey-light, 30%);
+        margin-left: -($spacer / 1.5);
+        margin-right: -($spacer / 1.5);
+        padding-left: $spacer / 1.85;
+        padding-right: $spacer / 1.5;
+        border-left: .25rem solid $brand-grey-light;
+        width: calc(100% + #{$spacer * 1.5});
+    }
+}
+
+.vscode-highlight {
+    --vscode-highlight-line-highlighted-border-color: rgba(
+        255,
+        255,
+        255,
+        .5
+    ); /* default: transparent */
+
+    --vscode-highlight-line-highlighted-border-width: 2px; /* default: 2px */
+}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 94f77211..b71690c1 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -18,6 +18,8 @@ $yellow: #eac146;
 
 $brand-gradient: linear-gradient(to right bottom, $brand-purple, $brand-pink);
 
+$body-background: darken($brand-white, 1%);
+
 // Fonts
 $font-family-base: 'Sharp Sans Medium', -apple-system, BlinkMacSystemFont,
     'Segoe UI', Helvetica, Arial, sans-serif;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index c6ad66a7..824958da 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -1,4 +1,4 @@
-// stylelint-disable selector-no-qualifying-type, declaration-no-important, selector-no-vendor-prefix
+// stylelint-disable selector-no-qualifying-type, selector-no-vendor-prefix
 
 @import 'variables';
 @import 'fonts';
@@ -19,7 +19,7 @@ body {
     font-family: $font-family-base;
     font-weight: $font-weight-base;
     line-height: $line-height;
-    background: darken($brand-white, 1%);
+    background: $body-background;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -261,58 +261,6 @@ table {
     }
 }
 
-// Code
-/////////////////////////////////////
-
-code,
-kbd,
-pre,
-samp {
-    // lots of !important to overwrite prims.js theme
-    font-family: $font-family-monospace !important;
-    font-size: $font-size-small !important;
-    border-radius: $border-radius !important;
-    text-shadow: none !important;
-
-    h1 &,
-    h2 &,
-    h3 &,
-    h4 &,
-    h5 & {
-        font-size: inherit !important;
-    }
-}
-
-// :not(pre) > code {
-//     background: darken($brand-white, 5%);
-//     color: $brand-grey-dark;
-//     display: inline-block;
-//     padding-left: .3rem;
-//     padding-right: .3rem;
-// }
-
-// pre {
-//     display: block;
-//     margin-bottom: $spacer;
-//     padding: 0;
-//     background: $brand-black;
-
-//     // make 'em scrollable
-//     overflow: auto;
-//     -webkit-overflow-scrolling: touch;
-
-//     code {
-//         padding: $spacer;
-//         white-space: pre;
-//         display: block;
-//         color: $brand-grey-lighter;
-//         overflow-wrap: normal;
-//         word-wrap: normal;
-//         word-break: normal;
-//         overflow: auto;
-//     }
-// }
-
 // Selection
 /////////////////////////////////////
 
@@ -332,3 +280,5 @@ samp {
 .anchor {
     margin-top: .6rem;
 }
+
+@import 'code';