显示侧边栏

拷贝组件

flux:x-copy 是 Flux Pro Max 提供的增强型拷贝组件，集成了 Shiki 高亮与一键拷贝能力，适合在文档或后台中展示命令行示例、配置片段等可复制代码。

安装步骤

如果你在项目中新增或更新了前端资源，并发现样式没有及时生效，可以重新构建资源：

1. 重新构建资源

npm run build

基础用法：不带 title

只指定语言，让组件负责高亮与拷贝，适合展示一段典型的 Laravel 代码片段。

use Illuminate\Support\Facades\Route;

Route::get('/dashboard', function () {
    return view('dashboard', [
        'user' => auth()->user(),
    ]);
})->middleware(['auth', 'verified'])->name('dashboard');

<flux:x-copy language="php">
use Illuminate\Support\Facades\Route;

Route::get('/dashboard', function () {
    return view('dashboard', [
        'user' => auth()->user(),
    ]);
})->middleware(['auth', 'verified'])->name('dashboard');
</flux:x-copy>

带 title 的命令示例

通过 title 为代码块添加标题，适合分组展示一段安装或运维脚本。

扫描本地网段在线主机（并发 ping）

#!/bin/bash

NET=192.168.1

for i in {1..254}; do
    ( ping -c 1 -W 1 $NET.$i >/dev/null && \
      echo "$NET.$i is UP" ) &
done

wait
echo "Scan completed."

<flux:x-copy title="扫描本地网段在线主机（并发 ping）" language="bash">
#!/bin/bash

NET=192.168.1

for i in {1..254}; do
    ( ping -c 1 -W 1 $NET.$i >/dev/null && \
      echo "$NET.$i is UP" ) &
done

wait
echo "Scan completed."
</flux:x-copy>

带 title 的命令示例(纯文本没有语法高亮)

当你只需要展示一段纯文本（如文案、长说明或诗词）并支持一键拷贝，而不需要语法高亮时，可以通过 highlight 关闭高亮。

江城子·乙卯正月二十日夜记梦

【江城子·乙卯正月二十日夜记梦】
         宋 · 苏轼

十年生死两茫茫，不思量，自难忘。
千里孤坟，无处话凄凉。
纵使相逢应不识，尘满面，鬓如霜。

夜来幽梦忽还乡，小轩窗，正梳妆。
相顾无言，惟有泪千行。
料得年年肠断处，明月夜，短松冈。

<flux:x-copy title="江城子·乙卯正月二十日夜记梦" language="plaintext" :highlight="false">
【江城子·乙卯正月二十日夜记梦】
         宋 · 苏轼

十年生死两茫茫，不思量，自难忘。
千里孤坟，无处话凄凉。
纵使相逢应不识，尘满面，鬓如霜。

夜来幽梦忽还乡，小轩窗，正梳妆。
相顾无言，惟有泪千行。
料得年年肠断处，明月夜，短松冈。
</flux:x-copy>

更多语言示例：Golang / Java

只需调整 language 属性，即可对不同语言（例如 Golang、Java）进行语法高亮。

package main

import "net/http"

func main() {
    http.HandleFunc("/health", func(w http.ResponseWriter, r *http.Request) {
        w.Write([]byte("ok"))
    })
    http.ListenAndServe(":8080", nil)
}

<flux:x-copy language="go">
package main

import "net/http"

func main() {
    http.HandleFunc("/health", func(w http.ResponseWriter, r *http.Request) {
        w.Write([]byte("ok"))
    })
    http.ListenAndServe(":8080", nil)
}
</flux:x-copy>

@RestController
public class HealthController {

    @GetMapping("/health")
    public String health() {
        return "ok";
    }
}

<flux:x-copy language="java">
@RestController
public class HealthController {

    @GetMapping("/health")
    public String health() {
        return "ok";
    }
}
</flux:x-copy>

样式控制：variant 与 codeClass

variant 控制组件根容器是否渲染为卡片；

codeClass 则用于精细控制代码区域的背景色、圆角和边框。

默认 card 容器（variant="card"）

C 语言Hello World入门

#include <stdio.h>

int main() {
    printf("Hello World!\n");
    return 0;
}

嵌入式 bare 容器 + 自定义 codeClass

.button {
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    border: 1px solid #4f46e5;
    color: #4f46e5;
    background-color: #fff;
    font-weight: 500;
    transition: background-color .2s, color .2s, box-shadow .2s;
}

.button:hover {
    background-color: #4f46e5;
    color: #fff;
    box-shadow: 0 10px 25px rgba(79, 70, 229, .35);
}

<flux:x-copy title="C 语言Hello World入门" language="c">
#include <stdio.h>

int main() {
    printf("Hello World!\n");
    return 0;
}
</flux:x-copy>

<flux:x-copy
    variant="bare"
    language="css"
    code-class="relative rounded-xl bg-zinc-50 dark:bg-zinc-800 border border-dashed border-zinc-300/80 dark:border-white/20"
>
.button {
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    border: 1px solid #4f46e5;
    color: #4f46e5;
    background-color: #fff;
    font-weight: 500;
    transition: background-color .2s, color .2s, box-shadow .2s;
}

.button:hover {
    background-color: #4f46e5;
    color: #fff;
    box-shadow: 0 10px 25px rgba(79, 70, 229, .35);
}
</flux:x-copy>

使用说明

通过 variant 为代码块添加标题，适合分组展示一段安装或运维脚本。

默认情况下，组件会将插槽中的内容视为需要高亮和拷贝的代码；你也可以通过 clipboard 属性单独控制拷贝内容。

language 用于提示 Shiki 使用对应的语法高亮，例如 bash、 php、 blade、 go、 java 等；当未指定时，将回退为 plaintext。

属性参考

下面列出了 flux:x-copy 支持的主要属性。

属性	说明
title	可选。代码块标题，会显示在卡片顶部边框内。
clipboard	可选。自定义拷贝到剪贴板的内容；默认会拷贝插槽中的代码文本。
language	可选。用于语法高亮的语言标识，例如 bash、 php、 blade、 go、 java 等。默认值： plaintext。
highlight	可选。是否启用 Shiki 语法高亮。布尔值，默认： true。
codeClass	可选。自定义代码区域容器的 CSS 类名，用于控制背景色、圆角、边框等；未设置时，组件会使用 bg-white dark:bg-zinc-900 作为默认代码块背景色。
variant	可选。控制组件根容器的外观。可选值： card （默认，渲染带边框与圆角的卡片容器）， bare （仅输出代码区域，便于嵌入自定义卡片或布局）。默认值： card。

language 属性的枚举值与 Shiki 官方内置语言列表保持一致，完整 ID 可在 Shiki Languages 页面中的「Bundled Languages」表格中查看。

枚举类别	说明 / 示例
通用编程语言	例如 php、 go、 java、 c、 cpp、 python 等，对应你需要高亮的后端或通用编程语言。
Web / 标记语言	例如 html、 css、 javascript、 typescript、 json、 markdown 等，适合展示前端或标记类代码片段。
模板 / 框架相关	例如 blade、 vue、 svelte、 tsx 等，用于对应具体框架或模板语法。
特殊语言	Shiki 还提供了 text、 txt、 plain 这类纯文本别名，适合作为高亮回退；以及 ansi 用于高亮终端输出内容。