Code

The Code component creates a color-highlighted code example. Since VueJS strips out line breaks, an internal pre is required to preserve them. Note, also, that since VueJS renders Vue components found inside v-pre-enabled tags, you must pass the template to the internal pre using v-html.

The copy button in the top-right corner is wired up to the useClipboard utility from @vueuse/core

Give it a try!

<Button>Touch Me</Button>

<Code language="vue">
  <pre v-text="'<Button>Touch Me</Button>'" />
</Code>

Components

Code is a standalone component.

Code

Code has a single prop: