Use of tabpanes that obviates the need for Prettier/linter-ignore directives (open-telemetry#3126)

Author: chalin

assets/scss/_styles_project.scss

@@ -278,3 +278,11 @@ body.td-page--draft .td-content {
     max-width: max-content;
   }
 }
+
+// TODO(@chalin): upstream
+.tab-body {
+  > .highlight:only-child {
+    margin: -1.5rem;
+    max-width: calc(100% + 3rem);
+  }
+}

content/en/docs/collector/getting-started.md

@@ -29,38 +29,38 @@ Pull a docker image and run the collector in a container. Replace
 `{{% param collectorVersion %}}` with the version of the Collector you wish to
 run.
 
-<!-- markdownlint-disable -->
-<!-- prettier-ignore-start -->
-{{< tabpane lang=shell >}}
-{{< tab DockerHub >}}
+{{% tabpane text=true %}} {{% tab DockerHub %}}
+
+```sh
 docker pull otel/opentelemetry-collector-contrib:{{% param collectorVersion %}}
 docker run otel/opentelemetry-collector-contrib:{{% param collectorVersion %}}
-{{< /tab >}}
+```
+
+{{% /tab %}} {{% tab ghcr.io %}}
 
-{{< tab ghcr.io >}}
+```sh
 docker pull ghcr.io/open-telemetry/opentelemetry-collector-releases/opentelemetry-collector-contrib:{{% param collectorVersion %}}
 docker run ghcr.io/open-telemetry/opentelemetry-collector-releases/opentelemetry-collector-contrib:{{% param collectorVersion %}}
-{{< /tab >}}
-{{< /tabpane >}}
-<!-- prettier-ignore-end -->
-<!-- markdownlint-restore -->
+```
+
+{{% /tab %}} {{% /tabpane %}}
 
 To load your custom configuration `config.yaml` from your current working
 directory, mount that file as a volume:
 
-<!-- markdownlint-disable -->
-<!-- prettier-ignore-start -->
-{{< tabpane lang=shell >}}
-{{< tab DockerHub >}}
+{{% tabpane text=true %}} {{% tab DockerHub %}}
+
+```sh
 docker run -v $(pwd)/config.yaml:/etc/otelcol-contrib/config.yaml otel/opentelemetry-collector-contrib:{{% param collectorVersion %}}
-{{< /tab >}}
+```
+
+{{% /tab %}} {{% tab ghcr.io %}}
 
-{{< tab ghcr.io >}}
+```sh
 docker run -v $(pwd)/config.yaml:/etc/otelcol-contrib/config.yaml ghcr.io/open-telemetry/opentelemetry-collector-releases/opentelemetry-collector-contrib:{{% param collectorVersion %}}
-{{< /tab >}}
-{{< /tabpane >}}
-<!-- prettier-ignore-end -->
-<!-- markdownlint-restore -->
+```
+
+{{% /tab %}} {{% /tabpane %}}
 
 ## Docker Compose
 

content/en/docs/faas/lambda-auto-instrument.md

@@ -25,9 +25,7 @@ first.
 
 ### Language Requirements
 
-<!-- prettier-ignore -->
-{{< tabpane text=true >}}
-{{% tab Java %}}
+{{< tabpane text=true >}} {{% tab Java %}}
 
 The Lambda layer supports the Java 8, 11, and 17 (Corretto) Lambda runtimes. For
 more information about supported Java versions, see the
@@ -69,26 +67,20 @@ OTEL_INSTRUMENTATION_AWS_LAMBDA_ENABLED=true
 OTEL_INSTRUMENTATION_AWS_SDK_ENABLED=true
 ```
 
-<!-- prettier-ignore -->
-{{% /tab %}}
-{{% tab JavaScript %}}
+{{% /tab %}} {{% tab JavaScript %}}
 
 The Lambda layer supports Node.js v14+ Lambda runtimes. For more information
 about supported JavaScript and Node.js versions, see the
 [OpenTelemetry JavaScript documentation](https://github.com/open-telemetry/opentelemetry-js).
 
-<!-- prettier-ignore -->
-{{% /tab %}}
-{{% tab Python %}}
+{{% /tab %}} {{% tab Python %}}
 
 The Lambda layer supports Python 3.8 and Python 3.9 Lambda runtimes. For more
 information about supported Python versions, see the
 [OpenTelemetry Python documentation](https://github.com/open-telemetry/opentelemetry-python/blob/main/README.md#supported-runtimes)
 and the package on [PyPi](https://pypi.org/project/opentelemetry-api/).
 
-<!-- prettier-ignore -->
-{{% /tab %}}
-{{< /tabpane >}}
+{{% /tab %}} {{< /tabpane >}}
 
 ### Configure `AWS_LAMBDA_EXEC_WRAPPER`
 
@@ -124,31 +116,23 @@ there is an embedded Collector with gRPC / HTTP receivers. The environment
 variables do not need to be updated. However, there are varying levels of
 protocol support and default values by language which are documented below.
 
-<!-- prettier-ignore -->
-{{< tabpane text=true >}}
-{{% tab Java %}}
+{{< tabpane text=true >}} {{% tab Java %}}
 
-`OTEL_EXPORTER_OTLP_PROTOCOL=grpc` Supports: `grpc`, `http/protobuf` and
+`OTEL_EXPORTER_OTLP_PROTOCOL=grpc` supports: `grpc`, `http/protobuf` and
 `http/json` `OTEL_EXPORTER_OTLP_ENDPOINT=http://localhost:4317`
 
-<!-- prettier-ignore -->
-{{% /tab %}}
-{{% tab Python %}}
-
-`OTEL_EXPORTER_OTLP_PROTOCOL=http/protobuf` Supports: `http/protobuf` and
-`http/json` `OTEL_EXPORTER_OTLP_ENDPOINT=http://localhost:4318`
-
-<!-- prettier-ignore -->
-{{% /tab %}}
-{{% tab JavaScript %}}
+{{% /tab %}} {{% tab JavaScript %}}
 
 `OTEL_EXPORTER_OTLP_PROTOCOL` env var is not supported The hard coded exporter
 uses the protocol `http/protobuf`
 `OTEL_EXPORTER_OTLP_ENDPOINT=http://localhost:4318`
 
-<!-- prettier-ignore -->
-{{% /tab %}}
-{{< /tabpane >}}
+{{% /tab %}} {{% tab Python %}}
+
+`OTEL_EXPORTER_OTLP_PROTOCOL=http/protobuf` supports: `http/protobuf` and
+`http/json` `OTEL_EXPORTER_OTLP_ENDPOINT=http://localhost:4318`
+
+{{% /tab %}} {{< /tabpane >}}
 
 ### Publish your Lambda
 

content/en/docs/instrumentation/js/getting-started/nodejs.md

@@ -64,11 +64,9 @@ npm install express
 Create a file named `app.ts` (or `app.js` if not using TypeScript) and add the
 following code to it:
 
-<!-- markdownlint-disable -->
-<!-- prettier-ignore-start -->
-{{< tabpane langEqualsHeader=true >}}
+{{% tabpane text=true %}} {{% tab TypeScript %}}
 
-{{< tab TypeScript >}}
+```TypeScript
 /*app.ts*/
 import express, { Express } from "express";
 
@@ -86,9 +84,11 @@ app.get("/rolldice", (req, res) => {
 app.listen(PORT, () => {
   console.log(`Listening for requests on http://localhost:${PORT}`);
 });
-{{< /tab >}}
+```
 
-{{< tab JavaScript >}}
+{{% /tab %}} {{% tab JavaScript %}}
+
+```JavaScript
 /*app.js*/
 const express = require("express");
 
@@ -106,11 +106,9 @@ app.get("/rolldice", (req, res) => {
 app.listen(PORT, () => {
   console.log(`Listening for requests on http://localhost:${PORT}`);
 });
-{{< /tab >}}
+```
 
-{{< /tabpane>}}
-<!-- prettier-ignore-end -->
-<!-- markdownlint-restore -->
+{{% /tab %}} {{% /tabpane%}}
 
 Run the application with the following command and open
 <http://localhost:8080/rolldice> in your web browser to ensure it is working.