Reference · SemText · Prose & code

`<sem-code>`

SemText element

The code is shown exactly as written — spacing included. You can mark the lines that matter, and the reader gets copy controls a plain code block cannot offer.

A code listing with a file name, a language, and marked lines. The code is shown exactly as written — spacing included. You can mark the lines that matter, and the reader gets copy controls a plain code block cannot offer. (optional): language token, rendered as a badge.

(optional): provenance label.

(optional): emphasised lines, 1-based, comma list of numbers and `a-b` ranges (`2,4-5`). Out-of-range entries are ignored.

(boolean, optional): start with soft-wrapped lines.

(optional): comma flags from `copy`, `wrap`; Unknown flags are ignored.

per the global attribute catalog (conventions.md §2)

Children

<pre>Child: the listing — authored flat (the element's own text) or as **at most one `<pre>`**, conventionally wrapping one `<code>`. Flat text with no `<pre>` is adopted into `<pre><code>` at enhance time; a host that already has a `<pre>` child is left as authored. A `<code>` that already holds element children (author-side highlighting) is left as authored — no line spans or `` are generated over it. More than one `<pre>` child is an error (schema `childRules`).
<code>Child: the listing — authored flat (the element's own text) or as **at most one `<pre>`**, conventionally wrapping one `<code>`. Flat text with no `<pre>` is adopted into `<pre><code>` at enhance time; a host that already has a `<pre>` child is left as authored. A `<code>` that already holds element children (author-side highlighting) is left as authored — no line spans or `` are generated over it. More than one `<pre>` child is an error (schema `childRules`).
<precode>Child: the listing — authored flat (the element's own text) or as **at most one `<pre>`**, conventionally wrapping one `<code>`. Flat text with no `<pre>` is adopted into `<pre><code>` at enhance time; a host that already has a `<pre>` child is left as authored. A `<code>` that already holds element children (author-side highlighting) is left as authored — no line spans or `` are generated over it. More than one `<pre>` child is an error (schema `childRules`).
Child: the listing — authored flat (the element's own text) or as **at most one `<pre>`**, conventionally wrapping one `<code>`. Flat text with no `<pre>` is adopted into `<pre><code>` at enhance time; a host that already has a `<pre>` child is left as authored. A `<code>` that already holds element children (author-side highlighting) is left as authored — no line spans or `` are generated over it. More than one `<pre>` child is an error (schema `childRules`).

Example

sem-code.html

source

              
              <sem-code id="c-rotate" lang="ts" filename="src/rotate.ts" mark="2,4-5" controls="copy,wrap">export function rotate(pair: Pair): Pair {
            
                const next = mint();
            
                retire(pair.refresh);
            
                return next;
            
              }</sem-code>

render

Live render boots with JavaScript — the authored source is alongside.

variant: defaults (no lang, filename or mark)

With `lang`, `filename` and `mark` all unauthored and `controls` left at its default, the chrome bar still renders but carries a single Copy control — nothing is invented. This is the smallest valid listing: the source is the element's own text; the element wraps it in `<pre><code>` when it enhances.

variant: defaults (no lang, filename or mark)

sem-code-defaults.html

source

              
              <sem-code>npm run build</sem-code>
            

render

Live render boots with JavaScript — the authored source is alongside.

variant: a line wider than the pane

A single long line with default controls (Copy only). The listing overflows horizontally, so the `<pre>` becomes keyboard-scrollable (`tabindex="0"`, labelled with the filename or `code`). This is the case `controls="copy,wrap"` exists to soften.

variant: a line wider than the pane

sem-code-long-line.html

source

              
              <sem-code lang="sh">curl -sS -X POST "$TOKEN_ENDPOINT" -d grant_type=refresh_token -d refresh_token="$REFRESH" -d client_id="$CLIENT_ID" -d code_verifier="$VERIFIER" -H 'Accept: application/json' | jq -r '.access_token'</sem-code>
            

render

Live render boots with JavaScript — the authored source is alongside.

variant: wrap from the start

The `wrap` attribute starts the listing soft-wrapped and the Wrap control renders pressed (`aria-pressed="true"`). Toggling it off removes the attribute and restores horizontal scroll — `wrap` is presentation, never content.

variant: wrap from the start

sem-code-wrap-start.html

source

              
              <sem-code lang="json" filename="config.json" wrap controls="copy,wrap">{ "retry": { "attempts": 5, "backoffMs": 250, "jitter": true }, "endpoint": "https://api.example.com/v1/rotate" }</sem-code>
            

render

Live render boots with JavaScript — the authored source is alongside.

variant: author-side markup in <code>

When the `<code>` already holds element children the listing is left exactly as authored — only the chrome is added. Line spans and `` are never generated over author-side highlighting, so the markup the author wrote survives verbatim.

variant: author-side markup in <code>

sem-code-author-markup.html

source

              
              <sem-code lang="ts" filename="highlighted.ts" controls="copy">
            
              <pre><code><span class="tok-kw">const</span> next = <span class="tok-fn">mint</span>();</code></pre>
            
              </sem-code>

render

Live render boots with JavaScript — the authored source is alongside.

Source: spec/schema/sem-code.md