Vue Email Logo
Components
Display code using Shiki syntax highlighter.

Install

Install component from your command line.

pnpm add @vue-email/components
# or get the individual package
pnpm add @vue-email/code-block

Getting started

Add the component to your email template. Include styles where needed.

<script setup lang="ts">
import { CodeBlock } from '@vue-email/components'

const code = `export default async (req, res) => {
  try {
    const html = await renderAsync(
      EmailTemplate({ firstName: 'John' })
    );
    return NextResponse.json({ html });
  } catch (error) {
    return NextResponse.json({ error });
  }
}`
</script>

<template>
  <CodeBlock 
    :code="code" 
    lang="typescript" 
    theme="min-dark" 
    show-line-numbers 
    :highlighted-lines="[3, 4, 5]" 
  />
</template>

Props

coderequired
string

The code that should be displayed

langrequired
string

The language of the code, see Languages for a list of all supported languages

themerequired
string

The theme of the code block, see Themes for a list of all supported themes

showLineNumbers
boolean

If true, line numbers will be displayed.

lineNumberColor
string

The color of the line numbers.

highlightedLines
Array<number>

An array of line numbers that should be highlighted.

lineHighlightingColor
String

The background color of the highlighted lines.


Copyright © 2024