Code

Usage

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

The component renders a native code element in a monospaced face with a tinted background and rounded corners. Use it to mark a short piece of code inside a sentence: a variable, a property, a file name or a single command.

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

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

Examples

Scales with its context

The font size is relative and works out to 87.5% of the surrounding text, so it shrinks along with smaller paragraphs instead of standing out.

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

<template>
  <Text class="max-w-lg text-sm">
    A
    <Code>size</Code>
    in small text scales along with a
    <Code>size</Code>
    in body text.
  </Text>
</template>

Inline code in body content

Prose applies the same styling to native code elements inside it, so rendered Markdown and rich text need no tag replacement.

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

<template>
  <Prose class="max-w-lg">
    <p>
      A
      <code>code</code>
      tag in body content needs no separate component.
    </p>
    <p>It matches the component exactly.</p>
  </Prose>
</template>

Blocks of code

Code longer than one line belongs in CodeBlock, which adds syntax highlighting, a language badge and a copy button.

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>

Accessibility

• The component renders a native code element, which screen readers announce as code.
• The background only separates the code from its surroundings and carries no state, so there are no tones.

API

Props

Slots