# `Localize.Message.Formatter.HTML`
[🔗](https://github.com/elixir-localize/localize/blob/v0.25.0/lib/localize/message/formatter/html.ex#L1)

HTML formatter for MF2 highlight tokens.

Wraps each token in a `<span class="mf2-<class>">...</span>`
element with the token text HTML-escaped. Optionally wraps the
whole output in `<pre class="mf2-highlight"><code>...</code></pre>`
for standalone display.

Class names use the same taxonomy as the tree-sitter highlight
captures consumed by [`mf2_wasm_editor`](https://hex.pm/packages/mf2_wasm_editor)
— `.mf2-variable`, `.mf2-punctuation-bracket`, `.mf2-string-escape`,
etc. — so a single stylesheet styles both the server-rendered HTML
produced here and the browser-side editor. Ready-made themes for
both are shipped with `mf2_wasm_editor` under its `priv/themes/`
directory.

Atoms from the highlighter carry underscores (`:punctuation_bracket`)
and are converted to hyphenated CSS classes (`.mf2-punctuation-bracket`)
on emission. The `mf2-` prefix avoids conflicts with other
highlighters on the same page (e.g. `makeup`).

# `options`

```elixir
@type options() :: [
  standalone: boolean(),
  wrapper_tag: String.t(),
  wrapper_class: String.t(),
  span_tag: String.t(),
  class_prefix: String.t()
]
```

# `render`

```elixir
@spec render([Localize.Message.Highlighter.token()], options()) :: String.t()
```

Renders a token list as HTML.

### Arguments

* `tokens` is a list of `t:Highlighter.token/0` tuples.

* `options` is a keyword list.

### Options

* `:standalone` — when `true`, wraps the output in a `<pre><code>`
  block. Default `false` (produces a fragment suitable for inline
  embedding).

* `:wrapper_tag` — tag used for the standalone wrapper. Default
  `"pre"`.

* `:wrapper_class` — CSS class for the wrapper. Default
  `"mf2-highlight"`.

* `:span_tag` — tag used per token. Default `"span"`.

* `:class_prefix` — prefix for per-token CSS classes. Default
  `"mf2-"` (produces e.g. `mf2-variable`, `mf2-punctuation-bracket`).

### Returns

* An HTML string.

---

*Consult [api-reference.md](api-reference.md) for complete listing*