Mishka
Chelekom

Code

v0.0.10

v0.0.10StableHeadlessStatelessAccessibleApache-2.0
Installation mix mishka.ui.gen.headless code
Source View Source

Overview of the Phoenix and LiveView Headless Code Component

The Mishka Chelekom Headless Code component renders code in Phoenix and LiveView templates, with no color, font or spacing of its own. By default it is an inline code element. With block it is a pre holding a code element, which keeps whitespace and line breaks. It does not highlight syntax.

The root takes class and carries a stable chelekom-code class. In the block form the class and any other attribute go on the pre, and the inner code has none. Other attributes pass through, such as id and data-*.

Base UI Code example - inline code and a code block (Phoenix headless)

Base UI Code example - inline code and a code block (Phoenix headless)

Run npm install first.

export const sum = (a, b) => a + b;
heex
<div class="w-full max-w-80 space-y-3">
  <p class="text-sm text-neutral-700 dark:text-neutral-300">
    Run
    <.code class="rounded bg-neutral-100 px-1.5 py-0.5 font-mono text-[0.85em] text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100">
      npm install
    </.code>
    first.
  </p>
  <.code
    block
    class="overflow-x-auto rounded-lg bg-neutral-100 p-3 font-mono text-sm text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100"
    phx-no-format
  >export const sum = (a, b) => a + b;</.code>
</div>

Code example - terminal lines with a prefix (Phoenix headless)

Code example - terminal lines with a prefix (Phoenix headless)

mix mishka.ui.gen.headless code
mix phx.server
heex
<div class="w-full rounded-lg bg-neutral-900 p-4 font-mono text-sm text-neutral-100">
  <.code
    block
    data-prefix="$"
    class="before:mr-3 before:text-neutral-500 before:content-[attr(data-prefix)]"
    phx-no-format
  >mix mishka.ui.gen.headless code</.code>
  <.code
    block
    data-prefix="$"
    class="before:mr-3 before:text-neutral-500 before:content-[attr(data-prefix)]"
    phx-no-format
  >mix phx.server</.code>
</div>

Parts & data attributes

There are no inner parts and no state attributes. The root is a code element, or a pre that contains one when block is set. Each line in the second example is its own block with a data-prefix attribute, which the before:content-[attr(data-prefix)] utility prints in front of it.

Accessibility

Code has no formal WAI-ARIA pattern. The component adds no roles or states and relies on the meaning of the code and pre elements. If a block scrolls sideways, add tabindex="0" so keyboard users can scroll it.