103 lines
2.6 KiB
Markdown
103 lines
2.6 KiB
Markdown
---
|
|
title: Copy Code
|
|
icon: ph:code
|
|
createTime: 2025/10/08 09:59:29
|
|
permalink: /en/guide/code/copy-code/
|
|
---
|
|
|
|
## Overview
|
|
|
|
This feature is powered by [@vuepress/plugin-copy-code](https://ecosystem.vuejs.press/zh/plugins/features/copy-code.html).
|
|
|
|
The code copying feature is enabled by default in the theme. It supports one-click copying of code displayed in articles.
|
|
|
|
By default, the theme adds a copy button to every code block. This button is only displayed on desktop.
|
|
|
|
When hovering over a code block, a copy button appears in the top-right corner.
|
|
|
|
## Configuration
|
|
|
|
Modify the behavior of code copying in the `.vuepress/config.ts` configuration file:
|
|
|
|
```ts title=".vuepress/config.ts"
|
|
export default defineUserConfig({
|
|
theme: plumeTheme({
|
|
// copyCode: false // Disable code copying
|
|
copyCode: {
|
|
// ...More configurations
|
|
}
|
|
})
|
|
})
|
|
```
|
|
|
|
### showInMobile
|
|
|
|
- **Type:** `boolean`
|
|
- **Default:** `false`
|
|
|
|
Whether to show the copy button on mobile devices.
|
|
|
|
### ignoreSelector
|
|
|
|
- **Type:** `string | string[]`
|
|
- **Default:** `[]`
|
|
|
|
CSS selector for elements within code blocks to be ignored during copying.
|
|
|
|
Example: `['.token.comment']` will ignore nodes with the class `.token.comment` in code blocks (this would ignore comments in prismjs).
|
|
|
|
### inlineSelector
|
|
|
|
- **Type:** `string | string[] | boolean`
|
|
- **Default:** `false`
|
|
|
|
Whether to copy inline code content on double-click.
|
|
|
|
`boolean`: Whether to copy inline code content on double-click.
|
|
|
|
`string[] | string`: Selector indicating which inline code content should be copyable.
|
|
|
|
### transform <Badge type="tip" text="Composition API Only" />
|
|
|
|
- **Type:** `(preElement: HTMLPreElement) => void`
|
|
- **Default:** `null`
|
|
|
|
A transformer function to modify the code block content within `<pre>` before copying. This option is only effective when using `useCopyCode()`.
|
|
|
|
## Composition API
|
|
|
|
The Composition API for this feature can be configured in `.vuepress/client.ts`:
|
|
|
|
```ts title=".vuepress/client.ts"
|
|
import { defineClientConfig } from '@vuepress/client'
|
|
import { useCopyCode } from '@vuepress/plugin-copy-code/client'
|
|
|
|
export default defineClientConfig({
|
|
setup() {
|
|
useCopyCode({
|
|
// ...
|
|
})
|
|
},
|
|
})
|
|
```
|
|
|
|
### Example
|
|
|
|
Add copyright information when copying code:
|
|
|
|
```ts title=".vuepress/client.ts"
|
|
import { defineClientConfig } from '@vuepress/client'
|
|
import { useCopyCode } from '@vuepress/plugin-copy-code/client'
|
|
|
|
export default defineClientConfig({
|
|
setup() {
|
|
useCopyCode({
|
|
transform: (preElement) => {
|
|
// Insert copyright information
|
|
pre.innerHTML += `\n Copied by vuepress-theme-plume`
|
|
},
|
|
})
|
|
},
|
|
})
|
|
```
|