Components
Code Block
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.