[2.0] Expressive Code in `<CommandTabs>`

[Vitor Ayres]

📋 Explain your issue

Hi, this is more a discussion rather than an issue.

How commands-tabs component looks, then how it could look:

For reference both situations in: https://beta.tauri.app/guides/create

This components appears in less than 39 times (counting few i18n pages and blog posts) but will be utilized more pages that currently are stubs.

The only benefit I see would be the "copy to clipboard" , if not that, I see no reason this to be an issue. Also in image example the copied code would not work out of the box.

Current code sample

<CommandTabs
	npm="cd my-tauri-app
    npm install
    npm run tauri dev"
	yarn="cd my-tauri-app
    yarn install
    yarn tauri dev"
	pnpm="cd my-tauri-app
    pnpm install
    pnpm tauri dev"
	cargo="cd my-tauri-app
    cargo tauri dev"
/>

Ideas:

1. Leave as it is;

2. Create multiples fragments, as already done for Cta, this time for Tauri cli commands in https://beta.tauri.app/2/reference/cli/ and then mix with other solutions for the remaining. I guess the biggest (to be) offender would be tauri add plugin in each recipe page;

3. Plain tabs, already utilized in some cases (code)

<Tabs>
   <TabItem label="npm">
      ```sh
      cd my-tauri-app
      npm install
      npm run tauri dev
      ```
   </TabItem>
   <TabItem label="Yarn">
      ```sh
      cd my-tauri-app
      yarn install
      yarn tauri dev
      ```
   </TabItem>
   <TabItem label="pnpm">
      ```sh
      cd my-tauri-app
      pnpm install
      pnpm tauri dev
      ```
   </TabItem>
   <TabItem label="Cargo">
      ```sh
      cd my-tauri-app
      cargo tauri dev
      ```
   </TabItem>
</Tabs>

4. Create a `PackageManagerTabs` component (codes)

based on Astro Docs wip migrated version to Starlight

Component draft

---
import { Tabs, TabItem } from '@astrojs/starlight/components';
---
<Tabs group="package-managers">
  <TabItem label="npm">
    <slot name="npm" />
  </TabItem>
  <TabItem label="pnpm">
    <slot name="pnpm" />
  </TabItem>
  <TabItem label="Yarn">
    <slot name="yarn" />
  </TabItem>
  <TabItem label="Cargo">
    <slot name="cargo" />
  </TabItem>
</Tabs>

Usage sample

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm run tauri dev
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm tauri dev
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn tauri dev
  ```
  </Fragment>
<Fragment slot="cargo">
  ```shell
  cargo tauri dev
  ```
  </Fragment>
</PackageManagerTabs>

5. More Ideas?

Thank you.

• I'm willing to open a pull request

[Fabian-Lars]

One thing i really don't like is the copy button on code blocks that contain multiple commands. If the user copy pastes that without thinking it will just cause issues. I already hated that on our live site for example here: https://tauri.app/v1/guides/getting-started/prerequisites#1-system-dependencies

[Vitor Ayres]

This is true. So as to not create more problems I agree that we should keep this way, without the copy button, for blocks with multiple commands, I'd say.
As extra information, there is a feature request to be able to have multiple copy buttons on code blocks. Link: expressive-code. That would improve this aspect.
The feature request mentions Bun docs that already have this feature

edit: while I agreed (now I'm neutral), after some time I recalled that multiline commands works when copied and pasted on powershell/Windows. Does Linux and Mac behaves differently? Better yet, what was the real situation where issues arise with it?

re-edit: I think I see the issue now, multiple lines means multiple commands while example you linked there's only three commands, when copied, it returns a command for each line.

[Lorenzo Lewis]

Is it possible to use expressive-code (what drives the code block generation) directly in a component? Then you can keep the same external API for that component but get the nicer rendering I think.

It'd be nice if there were a way to disable the copy button per-codeblock, but that could be a feature request to put in if it doesn't already exist.

[Vitor Ayres]

Is it possible to use expressive-code (what drives the code block generation) directly in a component?

Not sure I fully understood what you meant, but from what I've tested it doesn't render as expressive-code, but as plain code block. For it to work one need to pass plain fenced code blocks ```, in starlight docs they use it in the same way, but I hope this may change

And yeah, there's no way to disabled per codeblock yet. Only globally

[Vitor Ayres]

I haven't tested, but there's this draft pr "Astro expressive code component":
https://www.github.com/expressive-code/expressive-code/pull/32

[Lorenzo Lewis]

Yes, what that PR and respective issue describe were exactly what I was thinking. Essentially if Expressive Code exported an Astro component that you could use within Astro files or not but looks like not quite right now.