import{B as e,P as t,_ as n,f as r,g as i,h as a,l as o}from"./runtime-core.esm-bundler-CZvn3YaB.js";import{t as s}from"./plugin-vue_export-helper-CxTVcLa7.js";var c=JSON.parse(`{"path":"/en/guide/code/copy-code/","title":"Copy Code | Guide","lang":"en-US","frontmatter":{"title":"Copy Code","icon":"ph:code","createTime":"2025/10/08 09:59:29","permalink":"/en/guide/code/copy-code/","description":"Overview This feature is powered by @vuepress/plugin-copy-code. The code copying feature is enabled by default in the theme. It supports one-click copying of code displayed in a...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"Copy Code\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2025-10-09T07:46:05.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://theme-plume.vuejs.press/en/guide/code/copy-code/"}],["meta",{"property":"og:site_name","content":"Plume Theme"}],["meta",{"property":"og:title","content":"Copy Code"}],["meta",{"property":"og:description","content":"Overview This feature is powered by @vuepress/plugin-copy-code. The code copying feature is enabled by default in the theme. It supports one-click copying of code displayed in a..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"en-US"}],["meta",{"property":"og:locale:alternate","content":"zh-CN"}],["meta",{"property":"og:updated_time","content":"2025-10-09T07:46:05.000Z"}],["meta",{"property":"article:modified_time","content":"2025-10-09T07:46:05.000Z"}],["link",{"rel":"alternate","hreflang":"zh-cn","href":"https://theme-plume.vuejs.press/guide/code/copy-code/"}]]},"readingTime":{"minutes":1.03,"words":308},"git":{"createdTime":1759995965000,"updatedTime":1759995965000,"contributors":[{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":1,"avatar":"https://avatars.githubusercontent.com/pengzhanbo?v=4","url":"https://github.com/pengzhanbo"}],"changelog":[{"hash":"385059f214cb07fc9a098859e889432fb81f998b","time":1759995965000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: update en docs (#708)"}]},"autoDesc":true,"filePathRelative":"en/guide/code/copy-code.md","headers":[],"bulletin":false}`),l={name:`copy-code.md`},u={class:`code-block-title`,"data-title":`.vuepress/config.ts`},d={class:`code-block-title-bar`},f={class:`title`},p={id:`transform`,tabindex:`-1`},m={class:`header-anchor`,href:`#transform`},h={class:`code-block-title`,"data-title":`.vuepress/client.ts`},g={class:`code-block-title-bar`},_={class:`title`},v={class:`code-block-title`,"data-title":`.vuepress/client.ts`},y={class:`code-block-title-bar`},b={class:`title`};function x(s,c,l,x,S,C){let w=e(`VPIcon`),T=e(`Badge`);return t(),r(`div`,null,[c[7]||=a(`

Overview

This feature is powered by @vuepress/plugin-copy-code.

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:

`,7),o(`div`,u,[o(`div`,d,[o(`span`,f,[n(w,{provider:`iconify`,name:`vscode-icons:file-type-typescript`}),c[0]||=i(`.vuepress/config.ts`,-1)])]),c[1]||=a(`
export default defineUserConfig({
  theme: plumeTheme({
    // copyCode: false  // Disable code copying
    copyCode: {
      // ...More configurations
    }
  })
})
`,1)]),c[8]||=a(`

showInMobile

Whether to show the copy button on mobile devices.

ignoreSelector

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

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.

`,12),o(`h3`,p,[o(`a`,m,[o(`span`,null,[c[2]||=i(`transform `,-1),n(T,{type:`tip`,text:`Composition API Only`})])])]),c[9]||=a(`

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:

`,4),o(`div`,h,[o(`div`,g,[o(`span`,_,[n(w,{provider:`iconify`,name:`vscode-icons:file-type-typescript`}),c[3]||=i(`.vuepress/client.ts`,-1)])]),c[4]||=a(`
import { defineClientConfig } from '@vuepress/client'
import { useCopyCode } from '@vuepress/plugin-copy-code/client'

export default defineClientConfig({
  setup() {
    useCopyCode({
      // ...
    })
  },
})
`,1)]),c[10]||=o(`h3`,{id:`example`,tabindex:`-1`},[o(`a`,{class:`header-anchor`,href:`#example`},[o(`span`,null,`Example`)])],-1),c[11]||=o(`p`,null,`Add copyright information when copying code:`,-1),o(`div`,v,[o(`div`,y,[o(`span`,b,[n(w,{provider:`iconify`,name:`vscode-icons:file-type-typescript`}),c[5]||=i(`.vuepress/client.ts`,-1)])]),c[6]||=a(`
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\`
      },
    })
  },
})
`,1)])])}var S=s(l,[[`render`,x]]);export{c as _pageData,S as default};