XCode — 代码展示
带语法高亮的代码展示组件。内置自研轻量语法高亮（纯手写、零依赖，打包在 XCode/highlight.js 内，无需 npm install）。区分两个维度：
- 语言标签配色：JS / Vue / Bash / JSON … 不同语言不同标签色。
- 语义状态徽章：
default / success / warning / error / info五种状态，适合标记「正确示例 / 错误示例 / 提示」。
另自带行号、一键复制、可折叠能力，适配浅色 / 暗色主题。
实时演示
1// 计算平均值
2const avg = (list) =>
3 list.reduce((a, b) => a + b, 0) / list.length
4
5console.log(avg([1, 2, 3, 4])) // 2.5
1// 计算平均值
2const avg = (list) =>
3 list.reduce((a, b) => a + b, 0) / list.length
4
5console.log(avg([1, 2, 3, 4])) // 2.5
1// 计算平均值
2const avg = (list) =>
3 list.reduce((a, b) => a + b, 0) / list.length
4
5console.log(avg([1, 2, 3, 4])) // 2.5
vue
<XCode title="avg.js" language="javascript" :code="jsCode" />
<XCode title="avg.js" language="javascript" :code="jsCode" status="success" statusText="推荐写法" />Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
code | String | '' | 要展示的代码原文（必填） |
language | String | 'javascript' | 高亮语言（同时作为标签）：js/ts/html/vue/svg/css/scss/json/bash/shell/sh/console/md/py/yaml 及别名 |
title | String | '' | 标题栏文件名（不传不显示） |
status | String | 'default' | 语义状态：default/success/warning/error/info |
statusText | String | '' | 状态徽章自定义文案 |
showLineNumbers | Boolean | true | 是否显示行号 |
collapsible | Boolean | false | 是否可折叠（仅预览前 previewLines 行） |
previewLines | Number | 8 | 折叠态下预览行数 |
maxHeight | String | '420px' | 代码体最大高度（超出滚动） |
copyable | Boolean | true | 是否显示复制按钮 |
v-model
| 名称 | 类型 | 说明 |
|---|---|---|
collapsed | Boolean | 折叠状态（v-model:collapsed） |
状态说明
status | 颜色 | 默认文案 | 适用场景 |
|---|---|---|---|
default | 灰 #909399 | 代码 | 普通示例 |
success | 绿 #2ba471 | 成功 | 推荐写法、正确示例 |
warning | 橙 #e6a23c | 警告 | 注意事项、已废弃用法 |
error | 红 #f56c6c | 错误 | 禁止写法、报错示例 |
info | 蓝 #409eff | 提示 | 补充说明 |
注意事项
- 高亮由组件自带的
XCode/highlight.js+XCode/highlight.css提供，拷贝整个XCode/文件夹即可使用，样式自洽、无 CSS 缺失，也不依赖应用外壳变量或 UI 库。 - 内置语言：
javascript/ts/xml(html,vue,svg)/css/scss/json/bash(sh,shell,zsh,console)/markdown(md)/python(py)/yaml(yml)，未知语言自动回退为纯文本转义。 - 若要扩展语言，在
XCode/highlight.js新增词法规则并挂到highlightCode的switch；换配色改XCode/highlight.css。