Code 行内代码

正文中的行内代码，用于标识变量名、属性与命令。

执行 pnpm add @hina-ui/react 安装依赖，然后在样式入口引入 tokens.css。

import { Code, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Text className="max-w-lg">
      执行 <Code>pnpm add @hina-ui/react</Code> 安装依赖，然后在样式入口引入 <Code>tokens.css</Code>
      。
    </Text>
  )
}

tsx

用法

import { Code } from '@hina-ui/react'

组件渲染为原生的 code，使用等宽字体，带浅色底与圆角。它用于在句子中标识一小段代码，例如变量名、属性名、文件名或者一条命令。

--hn-accent

import { Code } from '@hina-ui/react'

export default function Demo() {
  return <Code>--hn-accent</Code>
}

tsx

示例

跟随上下文缩放

字号是相对值，取所在文字的 87.5%。用在小字号的段落中时会一同缩小，不会在句子中突出。

小字号中的 size 与正文中的 size 一同缩放。

import { Code, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Text className="max-w-lg text-sm">
      小字号中的 <Code>size</Code> 与正文中的 <Code>size</Code> 一同缩放。
    </Text>
  )
}

tsx

正文中的行内代码

Prose 会为其中的原生 code 标签应用同一套样式。渲染 Markdown 或者富文本时不需要替换标签。

正文中的 code 标签不需要单独引入组件。

它与组件的呈现完全一致。

import { Prose } from '@hina-ui/react'

export default function Demo() {
  return (
    <Prose className="max-w-lg">
      <p>
        正文中的 <code>code</code> 标签不需要单独引入组件。
      </p>
      <p>它与组件的呈现完全一致。</p>
    </Prose>
  )
}

tsx

成段的代码

超过一行的代码使用 CodeBlock，它带有语法着色、语言角标与复制按钮。

const theme = {
  accent: 'var(--hn-accent)',
  radius: 'var(--hn-radius-md)',
}

import { CodeBlock } from '@hina-ui/react'

const source = `const theme = {
  accent: 'var(--hn-accent)',
  radius: 'var(--hn-radius-md)',
}`

export default function Demo() {
  return <CodeBlock code={source} lang="ts" className="w-full max-w-lg" />
}

tsx

API

Props

属性	类型	默认值	说明
`className`	`string`	—	追加至根元素的类名

内容属性

属性	说明
`children`	代码文本

用法

示例

跟随上下文缩放

正文中的行内代码

成段的代码

无障碍

API

Props

内容属性