Partially Copying Code Blocks

[soerenmartius]

Is your feature request related to a problem? Please describe.

Currently, whenever copying from a code block, all code exposed in that box will be copied. In an ideal world, within the same code block I am able to show a command as well as the resulting output of a command. However, as a user, when copying the code I only want the actual command without the outputs to be copied.

E.g.

```sh
ls # command

file file file file #output

Describe the solution you'd like

Being able to define a line or range of lines of code to be copied from a code block.

```sh{cp1}
ls # command

file file file file #output

Describe alternatives you've considered

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[ms264556]

I would love this sort of functionality.

When showing the necessary console commands to achieve something, it is helpful to show not just the output but also the prompt since the prompt shows useful information.

e.g. I would like to show the entire code block below, but the only information I want to be copied is enable\n and debug\n:-

ruckus> enable 
ruckus# debug 
You have all rights in this mode.
ruckus(debug)#

[BenoitDesrosiers]

it would also be useful when putting code in a context. For example, if you want to show that a line has to be inserted between 2 lines, you want to show these 2 lines, but you don't want them to be copied

[ms264556]

For excluding entire lines, it turns out pretty easy to create a code comment which you can use like this:

```console
$ ls -la
output output output # [!code copy-ignore]
```

I added shiki transformers to my devDependencies: pnpm install -D @shikijs/transformers

Then I added this to my .vitepress config.ts:

import { transformerNotationMap } from '@shikijs/transformers'

...

export default defineConfig({
  ...
  markdown: {
    ...
    codeTransformers: [
      transformerNotationMap({ classMap: { 'copy-ignore': 'vp-copy-ignore', } })
    ],
    ...
  }
  ...
}

[ms264556]

Unfortunately you still get the line-breaks for the missing lines.

This can be fixed by wrapping vp-copy-ignore lines with the preceding line-break in an extra vp-copy-ignore span.

I wrote a shell ShikiTransformer today which does this (+ handles prompt formatting properly). I'll clean it up and post it on github this weekend.

You can try an example here.

[ms264556]

I have a fix in shiki 2.2.0 so this transformer can play nice with the word highlighting transformer. Once that's in vitepress then I'll fix the code and put it somewhere.

In the meantime, I chucked my proof-of-concept transformer here.

The line-breaks removal is in the pre() function, which hopefully runs after other stuff has finished modifying elements.

The preprocess() function has

1. code to remove prompts and output before the grammar runs, then reinstate it afterwards, since the prompts currently break highlighting. And

2. code to wrap prompts and output with classes for vp-copy-none + styling, with the option to also whack styles on the elements if you don't want to bother with css.

The default pattern is pretty boring: $ and > start code lines; anything without a prompt is considered output.
But you can add your own prompt regexp for other targets. Any capture groups in your regex are assumed to be prompt text, which can be style differently from the prompt symbol.

So e.g.

export default defineConfig({
  markdown: {
    codeTransformers: [
      transformerShellPrompt({
        languages: [
          ['ruckus-cli', /^(\w+)(?:\(([-\w]+)\))?(?:\:|>|#|%|\$) ?/d],
          'terminal'
        ],
        applyStyles: true
      })
    ],
    languageAlias: { 'ruckus-cli': 'shell', 'terminal': 'shell' },
})