mirror of
https://github.com/oceanprotocol/docs.git
synced 2024-06-26 11:16:27 +02:00
switch syntax highlighting
This commit is contained in:
parent
a819b40153
commit
cfe3287e9e
GPG Key ID:
606EEEF3C479A91F
|
|
@ -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
|
||||
[](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
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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
|
|||
|
||||
|
||||
|
||||
> 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'
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
161
src/styles/_code.scss
Normal file
161
src/styles/_code.scss
Normal file
|
|
@ -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 */
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user