CodeBlock

Syntax-highlighted code blocks using Shiki, for your HTML emaills.

Usage

Ever wanted to share a code snippet with your technical audience but feared it might break in email clients? The <CodeBlock> component makes it super-easy:

<template>
  <Layout>
    <Container>
      <CodeBlock language="html">
        <div class="container">
          <p>Hello world</p>
        </div>
      </CodeBlock>
    </Container>
  </Layout>
</template>

Props

code

Type: string
Default: ''

The code string to highlight. Alternative to passing code as slot content.

<script setup>
  const snippet = `const x = 42`
</script>

<template>
  <CodeBlock :code="snippet" language="javascript" />
</template>

language

Type: string
Default: 'html'

The language for syntax highlighting. Supports any language available in Shiki.

<template>
  <CodeBlock language="css">
    .button {
      background-color: #4338ca;
      color: white;
    }
  </CodeBlock>
</template>

theme

Type: string
Default: 'github-light'

The Shiki theme to use for syntax highlighting.

<template>
  <CodeBlock language="html" theme="github-dark">
    <div class="container">
      <p>Dark theme example</p>
    </div>
  </CodeBlock>
</template>

tdClass

Type: string
Default: 'max-w-0 mso-padding-alt-4'

CSS class applied to the wrapping <td> element. The default classes help prevent overflow issues and add some padding for Outlook (classic).