refactor(mdx): changed the way of processing inline code

Inline code is no more being handled by Prism, we are rendering it
with MDXProvider and custom CodeInline component, similar to other mdx
entities.

Side:
- fixed some mdx syntax innacuracies along with main changes

Author: Kirill Bolotsky

gatsby-config.js

@@ -68,6 +68,7 @@ const plugins = [
           resolve: 'gatsby-remark-prismjs',
           options: {
             showLineNumbers: true,
+            noInlineHighlight: true,
           },
         },
         {

src/components/blocks/html-content/html-content.module.scss

@@ -111,17 +111,6 @@
       }
     }
   }
-  :not(pre) code[class='language-text'] {
-    background: $color-additional-3;
-    padding: 0 5px !important; // to fight another important @ code.module
-    color: $color-primary !important;
-    display: inline-block;
-    text-align: center;
-    border-radius: 0;
-    font-weight: normal;
-    font-size: $font-size-code;
-    line-height: $line-height-xs;
-  }
   & > * + * {
     margin-top: 30px;
   }

src/components/shared/blockquote/blockquote.module.scss

@@ -12,9 +12,8 @@ blockquote {
   p {
     margin: 0;
   }
-  :not(pre) code[class='language-text'] {
-    background: $color-additional-2 !important;
-    line-height: 18px !important;
+  span[class='code-inline'] {
+    background-color: $color-additional-2;
   }
 }
 

src/components/shared/code/code-inline.scss

@@ -0,0 +1,12 @@
+.code-inline {
+  background-color: $color-additional-3;
+  padding: 0 5px;
+  color: $color-primary;
+  display: inline-block;
+  text-align: center;
+  border-radius: 0;
+  font-weight: normal;
+  font-size: $font-size-code;
+  line-height: $line-height-xs;
+  font-family: $font-family-secondary;
+}

src/components/shared/code/code.view.js

@@ -1,5 +1,7 @@
 import * as React from 'react';
+
 import styles from './code.module.scss';
+import './code-inline.scss';
 
 export const Code = ({ children, noLineNumbers }) => {
   return (
@@ -11,3 +13,7 @@ export const Code = ({ children, noLineNumbers }) => {
     />
   );
 };
+
+export const CodeInline = ({ children }) => (
+  <span className="code-inline">{children}</span>
+);

src/components/shared/code/index.js

@@ -1,2 +1,2 @@
-export { Code } from './code.view';
+export { Code, CodeInline } from './code.view';
 export { default as styles } from './code.module.scss';

src/components/templates/doc-page/doc-page-content/doc-page-content.view.js

@@ -3,6 +3,7 @@ import { HtmlContent } from 'components/blocks/html-content';
 import Glossary from 'components/pages/doc-page/glossary';
 import TableOfContents from 'components/pages/doc-page/table-of-contents';
 import Blockquote from 'components/shared/blockquote';
+import { CodeInline } from 'components/shared/code';
 import { CodeGroup } from 'components/shared/code-group';
 import { HeadingLandmark } from 'components/shared/heading';
 import LdScript from 'components/shared/ld-script';
@@ -20,6 +21,7 @@ const componentsForNativeReplacement = {
   Blockquote,
   LdScript,
   Glossary,
+  inlineCode: CodeInline,
 };
 
 const componentsForCustomReplacement = {

src/data/markdown/docs/01 guides/01 Getting started/03 Running k6.md

@@ -14,7 +14,7 @@ favourite editor, and save it as "script.js":
 import http from 'k6/http';
 import { sleep } from 'k6';
 
-export default function() {
+export default function () {
   http.get('http://test.k6.io');
   sleep(1);
 }
@@ -78,7 +78,7 @@ your VUs, similar to the `main()` function in many other languages:
 <div class="code-group" data-props='{"labels": []}'>
 
 ```javascript
-export default function() {
+export default function () {
   // vu code: do things here...
 }
 ```
@@ -112,7 +112,6 @@ import any other modules. This all has to be done from init-code.
 
 Read more about the different [life cycle stages of a k6 test](/using-k6/test-life-cycle).
 
-
 ## Using options
 
 If you want to avoid having to type `--vus 10` and `--duration 30s` all the time, you can include
@@ -127,7 +126,7 @@ export let options = {
   vus: 10,
   duration: '30s',
 };
-export default function() {
+export default function () {
   http.get('http://test.k6.io');
   sleep(1);
 }
@@ -172,9 +171,9 @@ export let options = {
   ],
 };
 
-export default function() {
+export default function () {
   let res = http.get('https://httpbin.org/');
-  check(res, { 'status was 200': r => r.status == 200 });
+  check(res, { 'status was 200': (r) => r.status == 200 });
   sleep(1);
 }
 ```
@@ -199,9 +198,7 @@ For running cloud tests from the CLI, you must first register a k6 Cloud account
 <div class="code-group" data-props='{"labels": ["Running a cloud test"]}'>
 
 ```shell
-
 $ k6 cloud script.js
-
 ```
 
 </div>

src/data/markdown/docs/01 guides/05 Testing Guides/02 Automated performance testing.md

@@ -144,7 +144,7 @@ k6 supports both local (`k6 run ...`) and cloud execution (`k6 cloud ...`) modes
 
 If you decide to use the k6 Cloud service, either to stream results with local execution (`k6 run -o cloud ...`) or through cloud execution, you'll need to authenticate with k6 Cloud. The recommended way to do this is by setting the `K6_CLOUD_TOKEN` environment variable in your CI tool. Alternatively you can pass in your k6 Cloud token to `k6 login cloud` like so:
 
-```sh
+```shell
 k6 login cloud -t <YOUR_K6_CLOUD_TOKEN>
 ```