Ermine UI

Code block

Code in a framed, scrollable box with a copy button and optional file name and line numbers.

See it liveSource on GitHub

Install

If this is the first component in the project, set up once. This writes ermine.json and copies the theme stylesheet. The installation guide covers Vue, Nuxt and Astro.

npx ermineui init
pnpm dlx ermineui init
yarn dlx ermineui init
bunx ermineui init

Then add the component:

npx ermineui add code-block
pnpm dlx ermineui add code-block
yarn dlx ermineui add code-block
bunx ermineui add code-block

That copies 2 files into src/components/ui/code-block/, and the 1 component it is built from. Files you already have are kept.

Use

import { CodeBlock } from '@/components/ui/code-block'
<Tour v-model:open="touring" :steps="[
  { target: '#deploy-button', title: 'Deploy from here', description: 'Or just push to main.' },
  { target: '#search', title: 'Find anything', side: 'bottom' },
]" />

<Banner v-model:open="showBanner" variant="info" dismissible>
  Scheduled maintenance on Sunday.
  <template #action><a href="/status">Details</a></template>
</Banner>

<Timeline>
  <TimelineItem title="Promoted to production" time="12 min ago" tone="success">4f2c9a1 by Ines.</TimelineItem>
</Timeline>

<CodeBlock :code="snippet" filename="nuxt.config.ts" line-numbers />
<CopyButton value="dpl_12d5" label="Copy deployment id" />
Press <Kbd>⌘</Kbd> <Kbd>K</Kbd>

In Nuxt, with the auto-import setting, the tags work in templates without the import. In Astro, use it inside a Vue island.

What gets copied

FileWhere it goes
CodeBlock.vuesrc/components/ui/code-block/CodeBlock.vue
index.tssrc/components/ui/code-block/index.ts

It is built from: Copy button. These are added with it.

The folders are the suggested ones. ermine.json says where yours are.

Source

This is exactly what the command copies. To install by hand, create each file below and the helpers listed above.

CodeBlock.vue 101 lines
<script setup lang="ts">
import { computed } from 'vue'
import { CopyButton } from '../copy-button'

const props = defineProps<{
  /** The code, as plain text. This is also what the copy button copies. */
  code: string
  /** Shown in a bar above the code. */
  filename?: string
  /** Number the lines. */
  lineNumbers?: boolean
  /** Wrap long lines instead of scrolling sideways. */
  wrap?: boolean
}>()

const lines = computed(() => props.code.replace(/\n$/, '').split('\n'))
</script>

<template>
  <figure class="er-code-block" :data-wrap="wrap ? '' : undefined">
    <figcaption v-if="filename" class="er-code-block-header">{{ filename }}</figcaption>
    <CopyButton class="er-code-block-copy" :value="code" label="Copy code" />
    <!-- Focusable so a long line can be scrolled with the keyboard; the role is what lets it carry a name. -->
    <pre tabindex="0" role="group" :aria-label="filename ?? 'Code'"><code><template v-if="lineNumbers"><span v-for="(line, index) in lines" :key="index" class="er-code-block-line">{{ line }}{{ '\n' }}</span></template><slot v-else>{{ code }}</slot></code></pre>
  </figure>
</template>

<style>
@layer components {
  .er-code-block {
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0;
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius-lg);
    background: var(--er-muted);
    overflow: hidden;
  }

  .er-code-block-header {
    padding: 0.5rem 3rem 0.5rem 1rem;
    border-bottom: 1px solid var(--er-border);
    color: var(--er-muted-foreground);
    font-family: var(--er-font-mono);
    font-size: 0.75rem;
  }

  .er-code-block-copy {
    position: absolute;
    top: 0.25rem;
    right: 0.375rem;
  }

  .er-code-block pre {
    margin: 0;
    padding: 0.875rem 1rem;
    color: var(--er-foreground);
    font-family: var(--er-font-mono);
    font-size: 0.8125rem;
    line-height: 1.6;
    tab-size: 2;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  /* Without a header, the first line keeps clear of the copy button. */
  .er-code-block:not(:has(.er-code-block-header)) pre {
    padding-right: 3rem;
  }

  .er-code-block pre:focus-visible {
    outline: 2px solid var(--er-ring);
    outline-offset: -2px;
  }

  .er-code-block[data-wrap] pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .er-code-block code {
    font: inherit;
    counter-reset: er-line;
  }

  /* Numbers are drawn in CSS, so selecting and copying the code never picks them up. */
  .er-code-block-line::before {
    content: counter(er-line);
    counter-increment: er-line;
    display: inline-block;
    width: 1.75rem;
    margin-right: 1rem;
    color: var(--er-muted-foreground);
    opacity: 0.7;
    text-align: right;
    user-select: none;
  }
}
</style>
index.ts 3 lines
/** Code block — code in a framed, scrollable box with a copy button and optional file name and line numbers. */
export { default as CodeBlock } from './CodeBlock.vue'