Search documentation of Localize

# Localize.Message.Formatter.HTML (Localize v0.39.0)

Copy Markdown View Source

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` — `.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`).

## Summary

### Types

options()

### Functions

render(tokens, options \\ [])

Renders a token list as HTML.

## Types

# options()

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

## Functions

# render(tokens, options \\ [])

    @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.