vuepress-theme-plume/assets/copy-code-CDmC_evy.js

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":"/guide/code/copy-code/","title":"代码复制 | 指南","lang":"zh-CN","frontmatter":{"title":"代码复制","icon":"ph:code","createTime":"2024/03/04 09:59:29","permalink":"/guide/code/copy-code/","description":"概述 该功能由 @vuepress/plugin-copy-code 提供支持。 主题默认启用了代码复制功能。支持 一键复制 在 文章中 展示的代码。 默认情况下， 主题会为每一个 代码块 添加一个复制按钮。该按钮仅在桌面端显示。 当鼠标悬停在 代码块 上时，在右上角会出现一个复制按钮。 配置 在 .vuepress/config.ts 配置文件中，修...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"代码复制\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2025-10-07T15:13:09.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://theme-plume.vuejs.press/guide/code/copy-code/"}],["meta",{"property":"og:site_name","content":"Plume 主题"}],["meta",{"property":"og:title","content":"代码复制"}],["meta",{"property":"og:description","content":"概述 该功能由 @vuepress/plugin-copy-code 提供支持。 主题默认启用了代码复制功能。支持 一键复制 在 文章中 展示的代码。 默认情况下， 主题会为每一个 代码块 添加一个复制按钮。该按钮仅在桌面端显示。 当鼠标悬停在 代码块 上时，在右上角会出现一个复制按钮。 配置 在 .vuepress/config.ts 配置文件中，修..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"zh-CN"}],["meta",{"property":"og:locale:alternate","content":"en-US"}],["meta",{"property":"og:updated_time","content":"2025-10-07T15:13:09.000Z"}],["meta",{"property":"article:modified_time","content":"2025-10-07T15:13:09.000Z"}],["link",{"rel":"alternate","hreflang":"en-us","href":"https://theme-plume.vuejs.press/en/guide/code/copy-code/"}]]},"readingTime":{"minutes":1.45,"words":434},"git":{"createdTime":1743474214000,"updatedTime":1759849989000,"contributors":[{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":2,"avatar":"https://avatars.githubusercontent.com/pengzhanbo?v=4","url":"https://github.com/pengzhanbo"}],"changelog":[{"hash":"4d2361a7046214fe0f4e4af01831107fd00e38ad","time":1759849989000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(theme)!: add collections support (#704)"},{"hash":"74dfa34ceed33c3517fdf53abbc8897b95b3f94c","time":1743474214000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: enable twoslash for code block"}]},"autoDesc":true,"filePathRelative":"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(`<h2 id="概述" tabindex="-1"><a class="header-anchor" href="#概述"><span>概述</span></a></h2><p>该功能由 <a href="https://ecosystem.vuejs.press/zh/plugins/features/copy-code.html" target="_blank" rel="noopener noreferrer">@vuepress/plugin-copy-code</a> 提供支持。</p><p>主题默认启用了代码复制功能。支持 一键复制 在 文章中 展示的代码。</p><p>默认情况下， 主题会为每一个 代码块 添加一个复制按钮。该按钮仅在桌面端显示。</p><p>当鼠标悬停在 代码块 上时，在右上角会出现一个复制按钮。</p><h2 id="配置" tabindex="-1"><a class="header-anchor" href="#配置"><span>配置</span></a></h2><p>在 <code>.vuepress/config.ts</code> 配置文件中，修改 代码复制的行为：</p>`,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(`<div class="language-ts" data-highlighter="shiki" data-ext="ts" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-ts"><span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">export</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> default</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> defineUserConfig</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">  theme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">plumeTheme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">    // copyCode: false</span><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">  // 禁用代码复制</span></span>
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;">    copyCode</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: {</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">      // ...更多配置</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">    }</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">  })</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">})</span></span></code></pre></div>`,1)]),c[8]||=a(`<h3 id="showinmobile" tabindex="-1"><a class="header-anchor" href="#showinmobile"><span>showInMobile</span></a></h3><ul><li><strong>类型：</strong> <code>boolean</code></li><li><strong>默认值：</strong> <code>false</code></li></ul><p>是否在移动端显示复制按钮。</p><h3 id="ignoreselector" tabindex="-1"><a class="header-anchor" href="#ignoreselector"><span>ignoreSelector</span></a></h3><ul><li><strong>类型：</strong> <code>string | string[]</code></li><li><strong>默认值：</strong> <code>[]</code></li></ul><p>代码块中的元素选择器，用于在复制时忽略相关元素。</p><p>例如: <code>[&#39;.token.comment&#39;]</code> 将忽略代码块中类名为 <code>.token.comment</code> 的节点 （这会在 prismjs 中忽略注释）。</p><h3 id="inlineselector" tabindex="-1"><a class="header-anchor" href="#inlineselector"><span>inlineSelector</span></a></h3><ul><li><strong>类型：</strong> <code>string | string[] | boolean</code></li><li><strong>默认值：</strong> <code>false</code></li></ul><p>是否在双击时复制行内代码内容。</p><p><code>boolean</code>: 是否在双击时复制行内代码内容。</p><p><code>string[] | string</code>: 选择器，表示需要复制的行内代码内容。</p>`,12),o(`h3`,p,[o(`a`,m,[o(`span`,null,[c[2]||=i(`transform `,-1),n(T,{type:`tip`,text:`仅限组合式 API`})])])]),c[9]||=a(`<ul><li><strong>类型：</strong> <code>(preElement: HTMLPreElement) =&gt; void</code></li><li><strong>默认值：</strong> <code>null</code></li></ul><p>一个转换器，用于在复制之前对 <code>&lt;pre&gt;</code> 中代码块内容进行修改。该选项仅在使用 <code>useCopyCode()</code> 时有效。</p><h2 id="组合式-api" tabindex="-1"><a class="header-anchor" href="#组合式-api"><span>组合式 API</span></a></h2><p>该功能的组合式 API 可以在 <code>.vuepress/client.ts</code> 中配置：</p>`,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(`<div class="language-ts line-numbers-mode" data-highlighter="shiki" data-ext="ts" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-ts"><span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">import</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> defineClientConfig</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> from</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> &#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">@vuepress/client</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span></span>
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">import</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> useCopyCode</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> from</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> &#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">@vuepress/plugin-copy-code/client</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">export</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> default</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> defineClientConfig</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
<span class="line"><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">  setup</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">() {</span></span>
<span class="line"><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">    useCopyCode</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">      // ...</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">    })</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">  },</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">})</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,1)]),c[10]||=o(`h3`,{id:`示例`,tabindex:`-1`},[o(`a`,{class:`header-anchor`,href:`#示例`},[o(`span`,null,`示例`)])],-1),c[11]||=o(`p`,null,`代码复制时，添加 copyright 信息`,-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(`<div class="language-ts line-numbers-mode" data-highlighter="shiki" data-ext="ts" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-ts"><span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">import</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> defineClientConfig</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> from</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> &#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">@vuepress/client</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span></span>
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">import</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> {</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> useCopyCode</span><span style="--shiki-light:#999999;--shiki-dark:#666666;"> }</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> from</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> &#39;</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">@vuepress/plugin-copy-code/client</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">export</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> default</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> defineClientConfig</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
<span class="line"><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">  setup</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">() {</span></span>
<span class="line"><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">    useCopyCode</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
<span class="line"><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">      transform</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: (</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">preElement</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">) =&gt; {</span></span>
<span class="line"><span style="--shiki-light:#A0ADA0;--shiki-dark:#758575DD;">        // 插入版权信息</span></span>
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">        pre</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">.</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;">innerHTML</span><span style="--shiki-light:#AB5959;--shiki-dark:#CB7676;"> +=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;"> \`</span><span style="--shiki-light:#A65E2B;--shiki-dark:#C99076;">\\n</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;"> Copied by vuepress-theme-plume</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">\`</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">      },</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">    })</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">  },</span></span>
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">})</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,1)])])}var S=s(l,[[`render`,x]]);export{c as _pageData,S as default};