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>

React 用法

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

const code = `const x = 42
console.log(x)`

function App() {
  return (
    <CodeBlock
      code={code}
      language="javascript"
      title="example.js"
      showLineNumbers
    />
  )
}

API

属性 (Attributes)

属性名	说明	类型	默认值
code	代码内容	string	''
language	编程语言	string	''
title	文件名/标签	string	—
showLineNumbers	是否显示行号	boolean	false
copyable	是否显示复制按钮	boolean	true
maxHeight	代码区最大高度	string	'400px'
copyText	复制按钮文案	string	'复制'
copiedText	已复制按钮文案	string	'已复制'