CodeBlock 代码块

用于展示代码的现代化代码块组件，支持深浅主题、语言标签、行号、一键复制、行高亮和基础语法着色。

基础用法

javascript

class="vk-code-keyword">function greet(name) {
  console.log(class="vk-code-string">`Hello, ${name}!`)
  class="vk-code-keyword">return true
}

greet(class=class="vk-code-string">"vk-code-string">'World')

<script setup>
import CodeBlock from '@/vue/components/CodeBlock.vue'

const code = `function greet(name) {
  console.log(\`Hello, \${name}!\`)
  return true
}

greet('World')`
</script>
<template>
  <CodeBlock :code="code" language="javascript" />
</template>

显示行号

设置 showLineNumbers 属性显示行号，title 可显示文件名。

counter.ts

1234567

import { ref } from class=class="vk-code-string">"vk-code-string">'vue'

class="vk-code-keyword">const count = ref(class="vk-code-number">0)

class="vk-code-keyword">function increment() {
  count.value++
}

<script setup>
import CodeBlock from '@/vue/components/CodeBlock.vue'

const code = `import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}`
</script>
<template>
  <CodeBlock :code="code" language="typescript" title="counter.ts" show-line-numbers />
</template>

多语言

支持 JavaScript/TypeScript、Python、CSS、Bash 的基础语法高亮。

fib.py

class="vk-code-keyword">def fibonacci(n):
    if n <= class="vk-code-number">1:
        return n
    return fibonacci(n - class="vk-code-number">1) + fibonacci(n - class="vk-code-number">2)

style.css

.container {
  display: flex;
  gap: 16px;
  padding: 24px;
}

<script setup>
import CodeBlock from '@/vue/components/CodeBlock.vue'

const pyCode = `def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)`

const cssCode = `.container {
  display: flex;
  gap: 16px;
  padding: 24px;
}`
</script>
<template>
  <div style="display: flex; flex-direction: column; gap: 16px;">
    <CodeBlock :code="pyCode" language="python" title="fib.py" />
    <CodeBlock :code="cssCode" language="css" title="style.css" />
  </div>
</template>

双框架使用示例

Vue 3

<template>
  <CodeBlock
    :code="codeSnippet"
    language="typescript"
    title="demo.ts"
    :show-line-numbers="true"
    :highlight-lines="[2]"
    theme="dark"
  />
</template>

<script setup lang="ts">
import { CodeBlock } from '@bobocn/element/vue'
import '@bobocn/element/style.css'

const codeSnippet = `function greet(name: string): string {
  // 高亮该核心逻辑行
  return \`Hello, \${name}!\`;
}`
</script>

React

import React from 'react'
import { CodeBlock } from '@bobocn/element/react'
import '@bobocn/element/style.css'

const codeSnippet = `function greet(name: string): string {
  // 高亮该核心逻辑行
  return \`Hello, \${name}!\`;
}`

export default function App() {
  return (
    <CodeBlock
      code={codeSnippet}
      language="typescript"
      title="demo.ts"
      showLineNumbers
      highlightLines={[2]}
      theme="dark"
    />
  )
}

API

属性 (Attributes / Props)

属性名	说明	类型	默认值
code	代码内容字符串	string	''
language	编程语言类型（如 javascript、typescript、python、css、bash）	string	''
title	代码块头部标题或文件名	string	—
showLineNumbers	是否显示左侧行号	boolean	false
copyable	是否显示右上角一键复制按钮	boolean	true
maxHeight	代码区域最大高度	string	'400px'
scrollable	超出高度时是否允许滚动	boolean	true
wrap	代码过长时是否允许自动换行	boolean	false
theme	代码块主题配色	'dark' | 'light'	'dark'
highlightLines	需要高亮标记的行号数组（从 1 开始）	number[]	[]
copyText	复制按钮悬浮文案	string	'复制'
copiedText	复制成功时的反馈文案	string	'已复制'