Simplified use of tabpane -- no more Prettier or linter ignores

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/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.