Code

Code block with a title bar and a copy button. Size prop: xs, sm, md, lg, xl.

Jump to API reference

Import

Vue
import { UiCode } from '@ziyarago/ui/vue'

Sizes

install.sh
npm install @ziyarago/ui
install.sh
npm install @ziyarago/ui
install.sh
npm install @ziyarago/ui
install.sh
npm install @ziyarago/ui
install.sh
npm install @ziyarago/ui
Vue
<UiCode size="xs" code="npm install @ziyarago/ui" title="install.sh" />

<UiCode size="sm" code="npm install @ziyarago/ui" title="install.sh" />

<UiCode size="md" code="npm install @ziyarago/ui" title="install.sh" />

<UiCode size="lg" code="npm install @ziyarago/ui" title="install.sh" />

<UiCode size="xl" code="npm install @ziyarago/ui" title="install.sh" />

Snippet

install.sh
npm install @ziyarago/ui
npm run dev
Vue
<UiCode
  title="install.sh"
  code="npm install @ziyarago/ui
npm run dev"
 />

Language label

json
{
  "hotel": "Swissotel Makkah",
  "nights": 7
}
Vue
<UiCode
  language="json"
  code="{
  &quot;hotel&quot;: &quot;Swissotel Makkah&quot;,
  &quot;nights&quot;: 7
}"
 />

API reference

Code block with a header (title or language) and a copy button; use for snippets and commands.

Props

PropType and valuesDefaultDescription
coderequiredstring—Source text shown in the block and copied by the button.
titlestring—Header label. Takes priority over language.
languagestring—Header label when no title is given. Display only, no syntax highlighting.
sizexssmmdlgxl'md'Block padding and font size.

Notes

  • The header falls back to the text "code" when neither title nor language is set.
  • No syntax highlighting: the code is rendered as plain monospace text.