Code

Compatibility-safe inline code and opt-in syntax-highlighted blocks.

ECodeInline

ECodeInline renders inline code inside a text flow. Place it inside EText (or another text element). It accepts safe HTML attributes and forwards them, plus style, to both emitted elements.

Prop	Type	Default	Required
—	No component-specific props; accepts shared safe native attributes.	—	—

It renders three siblings: a <style> with the Orange.fr webmail compatibility rule, a visible <code> element, and a hidden copy <span> (display:none). The hidden compatibility copy is excluded from plain-text conversion, so recipients receive the code once.

vue

<EText>
  Run <ECodeInline class="inline-code">pnpm install</ECodeInline> to begin.
</EText>

ECodeBlock

ECodeBlock is available only when codeBlock is configured on the Nuxt module. It uses the Shiki syntax highlighter and renders escaped tokens with inline theme colors. The language list is a closed build-time allowlist. Only configured languages and the grammars they import are bundled. A different runtime language value throws and lists the enabled languages.

Prop	Type	Default	Required
`code`	`string`	—	Yes
`language`	Configured language union	—	Yes
`lineNumbers`	`boolean`	`false`	No
`fontFamily`	`string`	`ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace`	No

Code is escaped before rendering. The language is typed from the configured allowlist and checked again at runtime. Line numbers are decorative and excluded from plain text.

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@lupinum/nuxt-email'],
  nuxtEmail: {
    codeBlock: {
      languages: ['typescript', 'bash'],
      theme: 'github-dark',
    },
  },
})

vue

<ECodeBlock
  :code="source"
  language="typescript"
  line-numbers
  style="border-radius:8px;padding:16px"
/>

The configured theme produces concrete inline colors; there is no stylesheet or browser runtime. Author styles are also inline for email-client compatibility. Theme selection is build-time because email clients do not reliably support the CSS-variable approach used for responsive light/dark Shiki themes.

Without codeBlock, the component is unregistered and Shiki performs no module-setup or production-bundle work. Use the generated #nuxt-email/testing binding when testing templates that contain ECodeBlock.