Code 行内代码

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

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

<script setup lang="ts">
  import { Code, Text } from '@hina-ui/vue'
</script>

<template>
  <Text class="max-w-lg">
    执行
    <Code>pnpm add @hina-ui/vue</Code>
    安装依赖，然后在样式入口引入
    <Code>tokens.css</Code>
    。
  </Text>
</template>

vue

用法

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

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

--hn-accent

<script setup lang="ts">
  import { Code } from '@hina-ui/vue'
</script>

<template>
  <Code>--hn-accent</Code>
</template>

vue

示例

跟随上下文缩放

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

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

<script setup lang="ts">
  import { Code, Text } from '@hina-ui/vue'
</script>

<template>
  <Text class="max-w-lg text-sm">
    小字号中的
    <Code>size</Code>
    与正文中的
    <Code>size</Code>
    一同缩放。
  </Text>
</template>

vue

正文中的行内代码

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

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

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

<script setup lang="ts">
  import { Prose } from '@hina-ui/vue'
</script>

<template>
  <Prose class="max-w-lg">
    <p>
      正文中的
      <code>code</code>
      标签不需要单独引入组件。
    </p>
    <p>它与组件的呈现完全一致。</p>
  </Prose>
</template>

vue

成段的代码

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

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

<script setup lang="ts">
  import { CodeBlock } from '@hina-ui/vue'

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

<template>
  <CodeBlock :code="source" lang="ts" class="w-full max-w-lg" />
</template>

vue

API

Props

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

Slots

插槽	说明
`default`	代码文本

用法

示例

跟随上下文缩放

正文中的行内代码

成段的代码

无障碍

API

Props

Slots