XCode — Code Display

A code display component with syntax highlighting. Ships with a hand-written, zero-dependency lightweight highlighter (bundled in XCode/highlight.js, no npm install needed). Two dimensions are distinguished:

• Language label colors: JS / Vue / Bash / JSON … different languages get different label colors.
• Semantic status badges: default / success / warning / error / info — great for marking "correct example / wrong example / hint".

Also includes line numbers, one-click copy, and collapsible sections, and adapts to light / dark themes.

Live Demo

avg.jsJAVASCRIPT 代码

1// Compute average

2const avg = (list) =>

3 list.reduce((a, b) => a + b, 0) / list.length

4

5console.log(avg([1, 2, 3, 4])) // 2.5

avg.jsJAVASCRIPT Recommended

1// Compute average

2const avg = (list) =>

3 list.reduce((a, b) => a + b, 0) / list.length

4

5console.log(avg([1, 2, 3, 4])) // 2.5

avg.jsJAVASCRIPT 警告

1// Compute average

2const avg = (list) =>

3 list.reduce((a, b) => a + b, 0) / list.length

4

5console.log(avg([1, 2, 3, 4])) // 2.5

<XCode title="avg.js" language="javascript" :code="jsCode" />
<XCode title="avg.js" language="javascript" :code="jsCode" status="success" statusText="Recommended" />

Props

Prop	Type	Default	Description
code	String	''	Source code to display (required)
language	String	'javascript'	Highlight language (also used as the label): js/ts/html/vue/svg/css/scss/json/bash/shell/sh/console/md/py/yaml and aliases
title	String	''	Title-bar file name (hidden when omitted)
status	String	'default'	Semantic status: default/success/warning/error/info
statusText	String	''	Custom text for the status badge
showLineNumbers	Boolean	true	Whether to show line numbers
collapsible	Boolean	false	Whether collapsible (shows only the first previewLines lines)
previewLines	Number	8	Number of lines shown when collapsed
maxHeight	String	'420px'	Max height of the code body (scrolls when exceeded)
copyable	Boolean	true	Whether to show the copy button

v-model

Name	Type	Description
collapsed	Boolean	Collapsed state (v-model:collapsed)

Status Reference

status	Color	Default text	Use case
default	gray #909399	Code	Ordinary example
success	green #2ba471	Success	Recommended / correct example
warning	orange #e6a23c	Warning	Caveats / deprecated usage
error	red #f56c6c	Error	Forbidden / erroneous example
info	blue #409eff	Hint	Supplementary note

Usage Notes

• Highlighting is provided by the component's own XCode/highlight.js + XCode/highlight.css. Copy the whole XCode/ folder to use it — the styles are self-contained (no missing CSS) and do not depend on your app shell variables or any UI library.
• Built-in languages: javascript/ts/xml(html,vue,svg)/css/scss/json/bash(sh,shell,zsh,console)/markdown(md)/python(py)/yaml(yml). Unknown languages automatically fall back to plain-text escaping.
• To add a language, add lexer rules in XCode/highlight.js and hook them into the highlightCode switch; to change colors, edit XCode/highlight.css.