HtmlCodeBlockPlugin

Turns <code-block> tags in HTML pages and parts into highlighted code blocks, the same output markdown fences get. Markdown already has fences, this is for HTML pages, layouts, and parts.

theme.HtmlCodeBlockPlugin({ rehypeExpressiveCodeOptions });

Options

Option	Type	Default	Role
`rehypeExpressiveCodeOptions`	`RehypeExpressiveCodeOptions`	required	The Expressive Code options, shared with markdown.
`tagName`	`string`	`"code-block"`	Tag to look for.

Tag attributes

The code comes from the tag’s content or the code attribute, leading whitespace trimmed.

Attribute	Role
`lang`	Language for highlighting.
`title`	File name shown in the frame.
`frame`	`auto`, `code`, `terminal`, or `none`.
`no-icon`	Hides the file icon.
`showLineNumbers`	Line numbers. `showLineNumbers="false"` turns them off.
`startLineNumber`	First line number.
`wrap`	Soft wrap long lines.
`preserveIndent`	Keep indentation when wrapping.
`hangingIndent`	Extra indent for wrapped lines.
`mark`, `ins`, `del`	Line or text markers, Expressive Code syntax, e.g. `mark="{2-3}"`.
`diff`	Treat the content as a diff.
`collapse`	Collapsible sections, e.g. `collapse="{1-5}"`.
`collapsible`	Preview the first lines with an expand button, `collapsible="10"` for a longer preview.
`meta`	Raw Expressive Code meta string, appended as is.

Examples

A titled block:

<code-block lang="ts" title="example.ts">
  const answer = 42;
</code-block>

const answer = 42;

A terminal with a marked line:

<code-block lang="shellscript" frame="terminal" mark="{2}">
  npm install
  npm run build
</code-block>

npm install
  npm run build

Code from an attribute, handy inside parts that receive it through $data:

<code-block lang="json" code="{{ $data.snippet }}"></code-block>

Cache

Identical blocks are highlighted once per build and stored across builds, see Expressive Code.