diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index a361442fa07f..512fae516877 100644 --- a/assets/scss/_styles_project.scss +++ b/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); + } +} diff --git a/content/en/docs/collector/getting-started.md b/content/en/docs/collector/getting-started.md index 1b416393371e..d33caeb02417 100644 --- a/content/en/docs/collector/getting-started.md +++ b/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. - - -{{< 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 >}} - - +``` + +{{% /tab %}} {{% /tabpane %}} To load your custom configuration `config.yaml` from your current working directory, mount that file as a volume: - - -{{< 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 >}} - - +``` + +{{% /tab %}} {{% /tabpane %}} ## Docker Compose diff --git a/content/en/docs/instrumentation/js/getting-started/nodejs.md b/content/en/docs/instrumentation/js/getting-started/nodejs.md index c4fb2fb5ef50..25779dbe53cc 100644 --- a/content/en/docs/instrumentation/js/getting-started/nodejs.md +++ b/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: - - -{{< 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>}} - - +{{% /tab %}} {{% /tabpane%}} Run the application with the following command and open in your web browser to ensure it is working.