Usage
Add the component to your email template. Include styles where needed.
<script setup>
import { EButton, ECodeBlock } from 'vue-email'
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>
<ECodeBlock :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.