Code

Compatibility-safe inline code and opt-in Shiki 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.

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 renders Shiki tokens as escaped spans with inline theme colors. The language list is a closed build-time allowlist: only the configured Shiki entrypoints and their required transitive grammars are bundled, and a different runtime language value throws and lists the enabled languages.

nuxt.config.ts

modules: [[NuxtEmail, {
  codeBlock: {
    languages: ['typescript', 'bash'],
    theme: 'github-dark',
  },
}]]

vue

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

Prop	Contract
`code`	Required source string. Content is escaped before rendering.
`language`	Required configured Shiki language. It is typed from the allowlist and checked again at runtime.
`lineNumbers`	Optional boolean, default `false`. Line numbers are decorative and excluded from the plain-text alternative.
`fontFamily`	Optional monospace font stack applied inline to the block and tokens.

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.