Merge pull request #297 from oceanprotocol/feature/code-highlighting

Switch syntax highlighting

content/test.md

@@ -7,11 +7,15 @@ For more complete info, see [John Gruber's original spec](http://daringfireball.
 
 ## Headers
 
-```text
+```markdown
 # H1
+
 ## H2
+
 ### H3
+
 #### H4
+
 ##### H5
 ```
 
@@ -31,10 +35,10 @@ For more complete info, see [John Gruber's original spec](http://daringfireball.
 
 ## Emphasis
 
-```text
-Emphasis, aka italics, with *asterisks* or _underscores_.
+```markdown
+Emphasis, aka italics, with _asterisks_ or _underscores_.
 
-Strong emphasis, aka bold, with **asterisks** or __underscores__.
+Strong emphasis, aka bold, with **asterisks** or **underscores**.
 
 Combined emphasis with **asterisks and _underscores_**.
 
@@ -51,7 +55,7 @@ Strikethrough uses two tildes. ~~Scratch this.~~
 
 ## Lists
 
-```text
+```markdown
 - First unordered list item
 - Second unordered list item
 - Another item
@@ -60,7 +64,7 @@ Strikethrough uses two tildes. ~~Scratch this.~~
 - Actual numbers don't matter, just that it's a number
   - Unordered sub-list
 - And another item.
-   Some text that should be aligned with the above item.
+  Some text that should be aligned with the above item.
 ```
 
 - First unordered list item
@@ -73,22 +77,26 @@ Strikethrough uses two tildes. ~~Scratch this.~~
 - And another item.
   Some text that should be aligned with the above item.
 
-```text
+```markdown
 1. First ordered list item
 2. Another item
-  - Unordered sub-list.
+
+- Unordered sub-list.
+
 1. Actual numbers don't matter, just that it's a number
-  1. Ordered sub-list
-4. And another item.
+1. Ordered sub-list
+1. And another item.
    Some text that should be aligned with the above item.
 ```
 
 1. First ordered list item
 2. Another item
+
    - Unordered sub-list.
+
 3. Actual numbers don't matter, just that it's a number
-   1. Ordered sub-list
-4. And another item.
+4. Ordered sub-list
+5. And another item.
    Some text that should be aligned with the above item.
 
 ## Links
@@ -147,7 +155,7 @@ Here's our jellyfish, with the title being output as caption:
 
 Code blocks are part of the Markdown spec, but syntax highlighting isn't. However, many renderers -- like Github's and _Markdown Here_ -- support syntax highlighting.
 
-```text
+```markdown
 Inline `code` has `back-ticks around` it.
 ```
 
@@ -283,12 +291,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 +308,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 +330,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 +359,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 +393,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
 ```
 

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'

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'

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'

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')

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',

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",

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 {

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 */
+}

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;

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';