fix: copy button and horizontal scrollbar position in codeblocks

components/editor/CodeBlock.js

@@ -58,7 +58,7 @@ export default function CodeBlock({
         )}
         <div className={`pr-8 relative overflow-y-auto ${highlightClassName}`}>
           <Highlight
-            className={`pt-px pb-0 text-sm font-medium font-ligatures-contextual ${showLineNumbers ? 'ml-0' : 'ml-3'} ${textSizeClassName}`}
+            className={`pt-px pb-2 text-sm font-medium font-ligatures-contextual ${showLineNumbers ? 'ml-0' : 'ml-3'} ${textSizeClassName}`}
             language={codeBlocks[activeBlock].language ? codeBlocks[activeBlock].language : language}
             style={theme}
             showLineNumbers={showLineNumbers}
@@ -93,7 +93,7 @@ export default function CodeBlock({
 
   return (
     <>
-      <div className={`relative max-w-full rounded overflow-y-auto overflow-x-auto py-2 bg-code-editor-dark z-10 ${className}`}>
+      <div className={`relative max-w-full rounded overflow-y-auto overflow-x-auto pt-2 bg-code-editor-dark z-10 ${className}`}>
         {hasWindow && (
           <div className="pl-4 pb-2">
             <span className="inline-block rounded-full w-2.5 h-2.5 bg-mac-window-close mr-2"></span>

pages/docs/tools/generator/installation-guide.md

@@ -13,12 +13,13 @@ Before you install and use the AsyncAPI CLI and the generator library, ensure yo
 2. Npm v6.13.7 and higher
 
 To verify the versions of Node and Npm you have, run the following command on your terminal:
-```
-npm -v
-```
-```
-node -v
-```
+<CodeBlock language="bash">
+{`npm -v`}
+</CodeBlock>
+<br/>
+<CodeBlock language="bash">
+{`node -v`}
+</CodeBlock>
 
 If you don't have either Node or Npm installed, use the [official node.js installer](https://nodejs.org/en/download/).
 
@@ -32,14 +33,14 @@ The AsyncAPI CLI tool allows you to do many different things with the [AsyncAPI
 #### Install AsyncAPI CLI using NPM
 
 The AsyncAPI CLI is a NodeJS project, so the easiest way to install it is by using the following `npm` command:
-```
-npm install -g @asyncapi/cli
-```
+<CodeBlock language="bash">
+{`npm install -g @asyncapi/cli`}
+</CodeBlock>
 
 To install a specific version of the generator tool, pass the version during installation:
-```
-npm install -g @asyncapi/cli@{version}
-```
+<CodeBlock language="bash">
+{`npm install -g @asyncapi/cli@{version}`}
+</CodeBlock>
 
 #### MacOS 
 You can install in MacOS by using brew: `brew install asyncapi`. 
@@ -58,20 +59,26 @@ For further installation instructions for different operating systems, read the
 ### Update AsyncAPI CLI
 There are several reasons why you might want to update your generator version:
 * You have the generator tool installed but want to use the latest released features. To upgrade to the latest version, use the command below:
-```
-npm install -g @asyncapi/cli
-```
+
+<br/>
+<CodeBlock language="bash">
+{`npm install -g @asyncapi/cli`}
+</CodeBlock>
+
 * If your template isn't compatible with the latest generator version, you can update it to a specific version of the generator. Check the [version you need](https://github.com/asyncapi/cli/releases) and specify the version you want by using the **@** symbol as shown in the command below:
-```
-npm install -g @asyncapi/cli@{version}
-```
+
+<br/>
+<CodeBlock language="bash">
+{`npm install -g @asyncapi/cli@{version}`}
+</CodeBlock>
+
 > Sometimes you have to force additional npm installation like this: `npm install -g --force @asyncapi/cli`
 
 ### Uninstall AsyncAPI CLI
 To uninstall the generator, use the following command:
-```
-npm uninstall @asyncapi/cli -g
-``` 
+<CodeBlock language="bash">
+{`npm uninstall @asyncapi/cli -g`}
+</CodeBlock>
 
 > :memo: **Note:**  To use the generator in your CI/CD pipeline to automate whatever you generate for your event-driven architecture apps, install the AsyncAPI CLI in your pipeline. If you are using GitHub Actions, use [Github Actions for Generator](https://github.com/marketplace/actions/generator-for-asyncapi-documents).
 

pages/docs/tools/generator/usage.md

@@ -29,75 +29,75 @@ Usage: asyncapi generate fromTemplate <asyncapi> <template> [<options>]
 ```
 
 All templates are installable npm packages. Therefore, the value of `template` can be anything supported by `npm install`. Here's a summary of the possibilities:
-```
-npm install [<@scope>/]<name>
+<CodeBlock language="bash">
+{`npm install [<@scope>/]<name>
 npm install [<@scope>/]<name>@<tag>
 npm install [<@scope>/]<name>@<version>
 npm install [<@scope>/]<name>@<version range>
 npm install <git-host>:<git-user>/<repo-name>
 npm install <git repo url>
 npm install <tarball file>
 npm install <tarball url>
-npm install <folder>
-```
+npm install <folder> `}
+</CodeBlock>
 
 ### Global templates installed with `yarn` or `npm`
 
 You can preinstall templates globally before installing the generator CLI. The generator first tries to locate the template in local dependencies; if absent it checks where the global generator packages are installed.
 
-```bash
-npm install -g @asyncapi/html-template@0.16.0
+<CodeBlock language="bash">
+{`npm install -g @asyncapi/html-template@0.16.0
 asyncapi generate fromTemplate asyncapi.yaml @asyncapi/html-template
-# The generator uses html-template version 0.16.0 and not the latest version.
-```
+# The generator uses html-template version 0.16.0 and not the latest version. `}
+</CodeBlock>
 
 ### CLI usage examples
 
 **The shortest possible syntax:**
-```bash
-asyncapi generate fromTemplate asyncapi.yaml @asyncapi/html-template
-```
+<CodeBlock language="bash">
+{`asyncapi generate fromTemplate asyncapi.yaml @asyncapi/html-template `}
+</CodeBlock>
 
 **Generating from a URL:**
-```bash
-asyncapi generate fromTemplate https://bit.ly/asyncapi @asyncapi/html-template
-```
+<CodeBlock language="bash">
+{`asyncapi generate fromTemplate https://bit.ly/asyncapi @asyncapi/html-template`}
+</CodeBlock>
 
 **Specify where to put the result:**
-```bash
-asyncapi generate fromTemplate asyncapi.yaml @asyncapi/html-template -o ./docs
-```
+<CodeBlock language="bash">
+{`asyncapi generate fromTemplate asyncapi.yaml @asyncapi/html-template -o ./docs `}
+</CodeBlock>
 
 **Passing parameters to templates:**
-```bash
-asyncapi generate fromTemplate asyncapi.yaml @asyncapi/html-template -o ./docs -p title='Hello from param'
-```
+<CodeBlock language="bash">
+{`asyncapi generate fromTemplate asyncapi.yaml @asyncapi/html-template -o ./docs -p title='Hello from param' `}
+</CodeBlock>
 
 In the template you can use it like this: ` {{ params.title }}`
 
 **Disabling the hooks:**
-```bash
-asyncapi generate fromTemplate asyncapi.yaml @asyncapi/html-template -o ./docs -d generate:before generate:after=foo,bar
-```
+<CodeBlock language="bash">
+{`asyncapi generate fromTemplate asyncapi.yaml @asyncapi/html-template -o ./docs -d generate:before generate:after=foo,bar `}
+</CodeBlock>
 
 The generator skips all hooks of the `generate:before` type and `foo`, `bar` hooks of the `generate:after` type.
 
 **Installing the template from a folder:**
-```bash
-asyncapi generate fromTemplate asyncapi.yaml ~/my-template
-```
+<CodeBlock language="bash">
+{`asyncapi generate fromTemplate asyncapi.yaml ~/my-template `}
+</CodeBlock>
 
 It creates a symbolic link to the target directory (`~/my-template` in this case). 
 
 **Installing the template from a git URL:**
-```bash
-asyncapi generate fromTemplate asyncapi.yaml https://github.com/asyncapi/html-template.git
-```
+<CodeBlock language="bash">
+{`asyncapi generate fromTemplate asyncapi.yaml https://github.com/asyncapi/html-template.git `}
+</CodeBlock>
 
 **Map schema references from baseUrl to local folder:**
-```bash
-asyncapi generate fromTemplate test/docs/apiwithref.json @asyncapi/html-template -o ./build/ --force-write --map-base-url https://schema.example.com/crm/:./test/docs/
-```
+<CodeBlock language="bash">
+{`asyncapi generate fromTemplate test/docs/apiwithref.json @asyncapi/html-template -o ./build/ --force-write --map-base-url https://schema.example.com/crm/:./test/docs/ `}
+</CodeBlock>
 
 The parameter `--map-base-url` maps external schema references to local folders.
 
@@ -126,15 +126,15 @@ asyncapi/generator -o /app/output /app/asyncapi.yml @asyncapi/html-template --fo
 
 Use the following npx command on your terminal:
 
-```bash
-npx -p @asyncapi/cli asyncapi generate fromTemplate ./asyncapi.yaml @asyncapi/html-template
-```
+<CodeBlock language="bash">
+{`npx -p @asyncapi/cli asyncapi generate fromTemplate ./asyncapi.yaml @asyncapi/html-template`}
+</CodeBlock>
 
 ## Using as a module/package
 Once you install the generator in your project, you can use it to generate whatever you want. The following code snippet is an example of HTML generation using the official `@asyncapi/html-template` template and fetching the spec document from the server using:
-```
-https://raw.githubusercontent.com/asyncapi/asyncapi/2.0.0/examples/2.0.0/streetlights.yml
-```
+<CodeBlock language="bash">
+{`https://raw.githubusercontent.com/asyncapi/asyncapi/2.0.0/examples/2.0.0/streetlights.yml`}
+</CodeBlock>
 
 ```js
 const path = require('path');