[2.0] Expressive Code in `<CommandTabs>`

[vasfvitor]

📋 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

```mdx ```

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)

```mdx ```sh cd my-tauri-app npm install npm run tauri dev ``` ```sh cd my-tauri-app yarn install yarn tauri dev ``` ```sh cd my-tauri-app pnpm install pnpm tauri dev ``` ```sh cd my-tauri-app cargo tauri dev ``` ```

4. Create a `PackageManagerTabs` component (codes)

based on Astro Docs wip migrated version to Starlight

Component draft

```jsx --- import { Tabs, TabItem } from '@astrojs/starlight/components'; --- ```

Usage sample

``````jsx ```shell npm run tauri dev ``` ```shell pnpm tauri dev ``` ```shell yarn tauri dev ``` ```shell cargo tauri dev ``` ``````

5. More Ideas?

Thank you.

• [x] I'm willing to open a pull request

[FabianLars]

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

[vasfvitor]

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

[lorenzolewis]

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.

[vasfvitor]

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

[vasfvitor]

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

[lorenzolewis]

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.