# Code Block

> Code block components with options for themes, line numbers, and customization.

Web: https://vuemail.dev/components/code-block

Paste any snippet into an email built with Vuemail. The snippets are single file components that use the primitives from `@vuemaildev/vuemail`.

## Code Block without theme

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/code-block-without-theme

### Vue

```vue
<script setup lang="ts">
import { CodeBlock, Font } from '@vuemaildev/vuemail';

const code = `await resend.emails.send({
  from: 'you@example.com',
  to: 'user@gmail.com',
  subject: 'hello world',
  react: EmailTemplate({ firstName: 'John' }),
});`;
</script>

<template>
  <Font
    fallback-font-family="monospace"
    font-family="CommitMono"
    font-style="normal"
    :font-weight="400"
    :web-font="{
      url: '/fonts/commit-mono/commit-mono-regular.ttf',
      format: 'truetype',
    }"
  />
  <CodeBlock
    :code="code"
    font-family="'CommitMono', monospace"
    language="javascript"
    :theme="{}"
  />
</template>
```

## Code Block with predefined theme

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/code-block-with-predefined-theme

### Vue

```vue
<script setup lang="ts">
import { CodeBlock, dracula, Font } from '@vuemaildev/vuemail';

const code = `await resend.emails.send({
  from: 'you@example.com',
  to: 'user@gmail.com',
  subject: 'hello world',
  react: EmailTemplate({ firstName: 'John' }),
});`;
</script>

<template>
  <Font
    fallback-font-family="monospace"
    font-family="CommitMono"
    font-style="normal"
    :font-weight="400"
    :web-font="{
      url: '/fonts/commit-mono/commit-mono-regular.ttf',
      format: 'truetype',
    }"
  />
  <CodeBlock
    :code="code"
    font-family="'CommitMono', monospace"
    language="javascript"
    :theme="dracula"
  />
</template>
```

## Code Block with custom theme

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/code-block-with-custom-theme

### Vue

```vue
<script setup lang="ts">
import { CodeBlock, Font, type Theme } from '@vuemaildev/vuemail';

const code = `await resend.emails.send({
  from: 'you@example.com',
  to: 'user@gmail.com',
  subject: 'hello world',
  react: EmailTemplate({ firstName: 'John' }),
});`;

const customTheme: Theme = {
  base: {
    color: '#839496',
    textShadow: '0 1px rgba(0, 0, 0, 0.3)',
    fontFamily:
      "Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace",
    direction: 'ltr',
    textAlign: 'left',
    whiteSpace: 'pre',
    wordSpacing: 'normal',
    wordBreak: 'normal',
    lineHeight: '1.5',
    MozTabSize: '4',
    OTabSize: '4',
    tabSize: '4',
    WebkitHyphens: 'none',
    MozHyphens: 'none',
    hyphens: 'none',
    padding: '1em',
    margin: '.5em 0',
    overflow: 'auto',
    borderRadius: '0.3em',
    background: '#002b36',
  },
  comment: {
    color: '#586e75',
  },
  prolog: {
    color: '#586e75',
  },
  doctype: {
    color: '#586e75',
  },
  cdata: {
    color: '#586e75',
  },
  punctuation: {
    color: '#93a1a1',
  },
  property: {
    color: '#268bd2',
  },
  keyword: {
    color: '#268bd2',
  },
  tag: {
    color: '#268bd2',
  },
  'class-name': {
    color: '#FFFFB6',
    textDecoration: 'underline',
  },
  boolean: {
    color: '#b58900',
  },
  constant: {
    color: '#b58900',
  },
  symbol: {
    color: '#dc322f',
  },
  deleted: {
    color: '#dc322f',
  },
  number: {
    color: '#859900',
  },
  selector: {
    color: '#859900',
  },
  'attr-name': {
    color: '#859900',
  },
  string: {
    color: '#859900',
  },
  char: {
    color: '#859900',
  },
  builtin: {
    color: '#859900',
  },
  inserted: {
    color: '#859900',
  },
  variable: {
    color: '#268bd2',
  },
  operator: {
    color: '#EDEDED',
  },
  function: {
    color: '#268bd2',
  },
  regex: {
    color: '#E9C062',
  },
  important: {
    color: '#fd971f',
    fontWeight: 'bold',
  },
  entity: {
    color: '#FFFFB6',
    cursor: 'help',
  },
  url: {
    color: '#96CBFE',
  },
  bold: {
    fontWeight: 'bold',
  },
  italic: {
    fontStyle: 'italic',
  },
  atrule: {
    color: '#F9EE98',
  },
  'attr-value': {
    color: '#F9EE98',
  },
};
</script>

<template>
  <Font
    fallback-font-family="monospace"
    font-family="CommitMono"
    font-style="normal"
    :font-weight="400"
    :web-font="{
      url: '/fonts/commit-mono/commit-mono-regular.ttf',
      format: 'truetype',
    }"
  />
  <CodeBlock
    :code="code"
    font-family="'CommitMono', monospace"
    language="javascript"
    :theme="customTheme"
  />
</template>
```

## Code Block with line numbers

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/code-block-with-line-numbers

### Vue

```vue
<script setup lang="ts">
import { CodeBlock, dracula, Font } from '@vuemaildev/vuemail';

const code = `await resend.emails.send({
  from: 'you@example.com',
  to: 'user@gmail.com',
  subject: 'hello world',
  react: EmailTemplate({ firstName: 'John' }),
});`;
</script>

<template>
  <Font
    fallback-font-family="monospace"
    font-family="CommitMono"
    font-style="normal"
    :font-weight="400"
    :web-font="{
      url: '/fonts/commit-mono/commit-mono-regular.ttf',
      format: 'truetype',
    }"
  />
  <CodeBlock
    :code="code"
    font-family="'CommitMono', monospace"
    language="javascript"
    line-numbers
    :theme="dracula"
  />
</template>
```