refactor: code blocks api update

- set a strict list of language available for highlight: bash, javascript, json, markup, diff, go, plain
- adjusted styling
- added language declaration guard in Code
- updated md files accordingly

Author: Kirill Bolotsky

CONTRIBUTING_FILE_FORMAT.md

@@ -296,6 +296,22 @@ To be able to switch between different code tabs, we have to repeat the headerfu
 
 ### Notes on code blocks
 
+#### Languages
+
+There is a curated list of available languages that you should use when working with code blocks:
+
+1. `bash` covers all terminal code
+2. `javascript` for blocks with JS code
+3. `json` for JSON structures
+4. `diff` for showing diffs
+5. `markup` covers html and xml
+6. `go` for Go code
+7. `plain` for everything else, plain unhighlighted text
+
+Every other language, including languages from list but with grammar or case mistakes will be rendered as a `plain` by default.
+
+Let us know if there is necessity to bring highlight support for another language.
+
 #### Line numbers
 
     '{"labels": ["Nice code!", "This one is better", "Oh my.."], "lineNumbers": [true, true, true]}'

src/components/shared/code/code.js

@@ -7,9 +7,27 @@ import React, { useRef } from 'react';
 
 import styles from './code.module.scss';
 
+const SUPPORTED_LANGS = [
+  'bash',
+  'javascript',
+  'json',
+  'markup',
+  'go',
+  'plain',
+  'diff',
+];
 const DEFAULT_HEIGHT = `100%`;
 const MAX_HEIGHT = 400;
 
+const getLanguageDeclaration = (str) => {
+  if (!str) return 'plain';
+  const lang = str.split('-')[1];
+  if (SUPPORTED_LANGS.includes(lang)) {
+    return lang;
+  }
+  return 'plain';
+};
+
 const Code = ({ children, showLineNumbers, showHeightToggler }) => {
   if (!children) return null;
 
@@ -43,7 +61,7 @@ const Code = ({ children, showLineNumbers, showHeightToggler }) => {
       <Highlight
         {...defaultProps}
         code={children.props.children}
-        language={children.props.className?.split('-')?.[1] ?? 'plain'}
+        language={getLanguageDeclaration(children?.props?.className)}
       >
         {({ className, tokens, getLineProps, getTokenProps }) => (
           <pre

src/components/shared/code/code.module.scss

@@ -58,11 +58,12 @@
           color: #c3e88d;
         }
       }
-      &[class*='language-html'] {
+      &[class*='language-markup'] {
         .tag {
           color: #00cdff;
         }
-        .attr-name {
+        .attr-name,
+        .prolog {
           color: rgb(195, 232, 141);
         }
         .attr-value {
@@ -104,20 +105,23 @@
       }
 
       &.operator {
-        background-color: transparent !important;
-        color: rgb(181, 181, 181) !important;
+        background-color: transparent;
+        color: rgb(181, 181, 181);
       }
 
       &.constant {
-        color: $color-accent-secondary !important;
+        color: $color-accent-secondary;
       }
 
       &.function {
         color: rgb(255, 255, 255);
       }
 
       &.punctuation {
-        color: $color-tertiary !important;
+        color: $color-tertiary;
+      }
+      &.regex {
+        color: #dd4a68;
       }
     }
   }

src/data/markdown/docs/01 guides/01 Getting started/02 Installation.md

@@ -6,7 +6,7 @@ title: 'Installation'
 
 ### Debian/Ubuntu
 
-```shell
+```bash
 sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 379CE192D401AB61
 echo "deb https://dl.bintray.com/loadimpact/deb stable main" | sudo tee -a /etc/apt/sources.list
 sudo apt-get update
@@ -19,13 +19,13 @@ sudo apt-get install k6
 > command due to firewalls or proxies blocking their requests. If you experience this issue, you may try this
 > alternative approach instead:
 >
-> ```shell
+> ```bash
 > wget -q -O - https://bintray.com/user/downloadSubjectPublicKey?username=bintray | sudo apt-key add -
 > ```
 
 ### Red Hat/CentOS
 
-```shell
+```bash
 wget https://bintray.com/loadimpact/rpm/rpm -O bintray-loadimpact-rpm.repo
 sudo mv bintray-loadimpact-rpm.repo /etc/yum.repos.d/
 sudo yum install k6
@@ -35,7 +35,7 @@ sudo yum install k6
 
 <CodeGroup labels={['Brew']}>
 
-```shell
+```bash
 brew install k6
 ```
 
@@ -54,7 +54,7 @@ Install the binary in your `PATH` to run **k6** from any location.
 
 <CodeGroup labels={['Docker']}>
 
-```shell
+```bash
 docker pull loadimpact/k6
 ```
 

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

@@ -26,11 +26,11 @@ Then run k6 using this command:
 
 <CodeGroup labels={["CLI", "Docker", "Docker in Win PowerShell"]}>
 
-```shell
+```bash
 $ k6 run script.js
 ```
 
-```shell
+```bash
 # When using the `k6` docker image, you can't just give the script name since
 # the script file will not be available to the container as it runs. Instead
 # you must tell k6 to read `stdin` by passing the file name as `-`. Then you
@@ -40,7 +40,7 @@ $ k6 run script.js
 $ docker run -i loadimpact/k6 run - <script.js
 ```
 
-```shell
+```bash
 $ cat script.js | docker run -i loadimpact/k6 run -
 ```
 
@@ -52,15 +52,15 @@ Now we'll try running a load test with more than 1 virtual user and a slightly l
 
 <CodeGroup labels={["CLI", "Docker", "Docker in Win PowerShell"]}>
 
-```shell
+```bash
 k6 run --vus 10 --duration 30s script.js
 ```
 
-```shell
+```bash
 docker run -i loadimpact/k6 run --vus 10 --duration 30s - <script.js
 ```
 
-```shell
+```bash
 cat script.js | docker run -i loadimpact/k6 run --vus 10 --duration 30s -
 ```
 
@@ -95,7 +95,7 @@ running. Code _outside_ of it is called "init code", and is run only once per VU
 
 <CodeGroup labels={[""]}>
 
-```js
+```javascript
 // init code
 
 export default function( {
@@ -138,15 +138,15 @@ Then you just run the script without those parameters on the command line:
 
 <CodeGroup labels={["CLI", "Docker", "Docker in Win PowerShell"]}>
 
-```shell
+```bash
 $ k6 run script.js
 ```
 
-```shell
+```bash
 $ docker run -i loadimpact/k6 run - <script.js
 ```
 
-```shell
+```bash
 C:\ cat script.js | docker run -i loadimpact/k6 run -
 ```
 
@@ -197,7 +197,7 @@ For running cloud tests from the CLI, you must first register a k6 Cloud account
 
 <CodeGroup labels={["Running a cloud test"]}>
 
-```shell
+```bash
 $ k6 cloud script.js
 ```
 

src/data/markdown/docs/01 guides/01 Getting started/04 Results Output.md

@@ -19,7 +19,7 @@ When k6 displays the results to `stdout`, it will show the k6 logo and the follo
 
 <CodeGroup labels={[]}>
 
-```shell
+```bash
 execution: local
     output: -
     script: script.js
@@ -48,7 +48,7 @@ The test summary provides a general overview of your test result. The summary pr
 
 <CodeGroup labels={[]}>
 
-```shell
+```bash
 data_received..............: 148 MB 2.5 MB/s
 data_sent..................: 1.0 MB 17 kB/s
 http_req_blocked...........: avg=1.92ms   min=1µs      med=5µs      max=288.73ms p(90)=11µs     p(95)=17µs
@@ -75,7 +75,7 @@ vus_max....................: 100    min=100 max=100
 
 <CodeGroup labels={[]}>
 
-```shell
+```bash
 http_req_duration..........: avg=143.14ms min=112.87ms med=136.03ms max=1.18s    p(90)=164.2ms  p(95)=177.75ms
 ```
 
@@ -85,7 +85,7 @@ You could use the [summary-trend-stats](/using-k6/options#summary-trend-stats) o
 
 <CodeGroup labels={[]}>
 
-```shell
+```bash
 $ k6 run --summary-trend-stats="avg,p(99)" script.js
 ```
 
@@ -115,7 +115,7 @@ You can simultaneously send metrics to several outputs by using the CLI `--out`
 
 <CodeGroup labels={[]}>
 
-```shell
+```bash
 $ k6 run \
     --out json=test.json \
     --out influxdb=http://localhost:8086/k6
@@ -131,7 +131,7 @@ This is useful to get the aggregated test results in a machine-readable format,
 
 <CodeGroup labels={[]}>
 
-```shell
+```bash
 $ k6 run --summary-export=export.json script.js
 ```
 

src/data/markdown/docs/01 guides/02 Using k6/01 HTTP requests.md

@@ -10,7 +10,7 @@ your system. A simple example that just performs a GET request looks like this:
 
 <CodeGroup labels={["http_get.js"]} lineNumbers={[true]}>
 
-```js
+```javascript
 import http from 'k6/http';
 
 export default function () {
@@ -104,7 +104,7 @@ all reported using one single metric:
 
 <CodeGroup labels={["grouping.js" ]} lineNumbers={[true]}>
 
-```js
+```javascript
 for (var id = 1; id <= 100; id++) {
   http.get(`http://example.com/posts/${id}`);
 }
@@ -119,7 +119,7 @@ You can aggregate data from dynamic URLs by explicitly setting a name tag:
 
 <CodeGroup labels={["explicit_tag.js"]} lineNumbers={[true]}>
 
-```js
+```javascript
 for (var id = 1; id <= 100; id++) {
   http.get(`http://example.com/posts/${id}`, {
     tags: { name: 'PostsItemURL' },
@@ -180,7 +180,7 @@ Additionally, you can use the `http.url` (v0.16.0) wrapper to set the name tag w
 
 <CodeGroup labels={[ ]} lineNumbers={[true]}>
 
-```js
+```javascript
 for (var id = 1; id <= 100; id++) {
   http.get(http.url`http://example.com/posts/${id}`);
 }

src/data/markdown/docs/01 guides/02 Using k6/02 Metrics.md

@@ -47,7 +47,7 @@ If you want to access the timing information from an individual HTTP request, th
 
 <CodeGroup labels={["timings.js"]} lineNumbers={[true]}>
 
-```js
+```javascript
 import http from 'k6/http';
 export default function () {
   var res = http.get('http://httpbin.org');
@@ -79,7 +79,7 @@ You can also create your own metrics, that are reported at the end of a load tes
 
 <CodeGroup labels={["trend.js"]} lineNumbers={[true]}>
 
-```js
+```javascript
 import http from 'k6/http';
 import { Trend } from 'k6/metrics';
 
@@ -115,7 +115,7 @@ All values added to a custom metric can optionally be [tagged](/using-k6/tags-an
 
 <CodeGroup labels={["counter.js"]} lineNumbers={[true]}>
 
-```js
+```javascript
 import { Counter } from 'k6/metrics';
 
 let myCounter = new Counter('my_counter');
@@ -140,7 +140,7 @@ Note that there is currently no way of accessing the value of any custom metric
 
 <CodeGroup labels={["gauge.js"]} lineNumbers={[true]}>
 
-```js
+```javascript
 import { Gauge } from 'k6/metrics';
 
 let myGauge = new Gauge('my_gauge');
@@ -163,7 +163,7 @@ The value of `my_gauge` will be 2 at the end of the test. As with the Counter me
 
 <CodeGroup labels={["trend.js"]} lineNumbers={[true]}>
 
-```js
+```javascript
 import { Trend } from 'k6/metrics';
 
 let myTrend = new Trend('my_trend');
@@ -187,7 +187,7 @@ By default, k6 will print average, min, max, median, 90th percentile, and 95th p
 
 <CodeGroup labels={["rate.js"]} lineNumbers={[true]}>
 
-```js
+```javascript
 import { Rate } from 'k6/metrics';
 
 let myRate = new Rate('my_rate');

src/data/markdown/docs/01 guides/02 Using k6/03 Checks.md

@@ -13,7 +13,7 @@ for example:
 
 <CodeGroup labels={["check.js"]} lineNumbers={[true]}>
 
-```js
+```javascript
 import { check } from 'k6';
 import http from 'k6/http';
 
@@ -39,7 +39,7 @@ You may also add multiple checks within a single check() statement, like this:
 
 <CodeGroup labels={["checks.js"]} lineNumbers={[true]}>
 
-```js
+```javascript
 import { check } from 'k6';
 import http from 'k6/http';
 
@@ -68,7 +68,7 @@ get what you want:
 
 <CodeGroup labels={["check_thresholds.js"]} lineNumbers={[true]}>
 
-```js
+```javascript
 import http from 'k6/http';
 import { check } from 'k6';
 import { Rate } from 'k6/metrics';