mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
103 lines
2.5 KiB
Markdown
103 lines
2.5 KiB
Markdown
---
|
|
title: 代码复制
|
|
icon: ph:code
|
|
createTime: 2024/03/04 09:59:29
|
|
permalink: /guide/code/copy-code/
|
|
---
|
|
|
|
## 概述
|
|
|
|
该功能由 [@vuepress/plugin-copy-code](https://ecosystem.vuejs.press/zh/plugins/features/copy-code.html) 提供支持。
|
|
|
|
主题默认启用了代码复制功能。支持 一键复制 在 文章中 展示的代码。
|
|
|
|
默认情况下， 主题会为每一个 代码块 添加一个复制按钮。该按钮仅在桌面端显示。
|
|
|
|
当鼠标悬停在 代码块 上时，在右上角会出现一个复制按钮。
|
|
|
|
## 配置
|
|
|
|
在 `.vuepress/config.ts` 配置文件中，修改 代码复制的行为：
|
|
|
|
```ts title=".vuepress/config.ts"
|
|
export default defineUserConfig({
|
|
theme: plumeTheme({
|
|
// copyCode: false // 禁用代码复制
|
|
copyCode: {
|
|
// ...更多配置
|
|
}
|
|
})
|
|
})
|
|
```
|
|
|
|
### showInMobile
|
|
|
|
- **类型：** `boolean`
|
|
- **默认值：** `false`
|
|
|
|
是否在移动端显示复制按钮。
|
|
|
|
### ignoreSelector
|
|
|
|
- **类型：** `string | string[]`
|
|
- **默认值：** `[]`
|
|
|
|
代码块中的元素选择器，用于在复制时忽略相关元素。
|
|
|
|
例如: `['.token.comment']` 将忽略代码块中类名为 `.token.comment` 的节点 （这会在 prismjs 中忽略注释）。
|
|
|
|
### inlineSelector
|
|
|
|
- **类型：** `string | string[] | boolean`
|
|
- **默认值：** `false`
|
|
|
|
是否在双击时复制行内代码内容。
|
|
|
|
`boolean`: 是否在双击时复制行内代码内容。
|
|
|
|
`string[] | string`: 选择器，表示需要复制的行内代码内容。
|
|
|
|
### transform <Badge type="tip" text="仅限组合式 API" />
|
|
|
|
- **类型：** `(preElement: HTMLPreElement) => void`
|
|
- **默认值：** `null`
|
|
|
|
一个转换器，用于在复制之前对 `<pre>` 中代码块内容进行修改。该选项仅在使用 `useCopyCode()` 时有效。
|
|
|
|
## 组合式 API
|
|
|
|
该功能的组合式 API 可以在 `.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({
|
|
// ...
|
|
})
|
|
},
|
|
})
|
|
```
|
|
|
|
### 示例
|
|
|
|
代码复制时，添加 copyright 信息
|
|
|
|
```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) => {
|
|
// 插入版权信息
|
|
pre.innerHTML += `\n Copied by vuepress-theme-plume`
|
|
},
|
|
})
|
|
},
|
|
})
|
|
```
|