Mishka
Chelekom

Code

v0.0.10

v0.0.10StableMobStatelessApache-2.0
Installation mix mishka.ui.gen.mob code
Source View Source

The Mishka Chelekom Mob Code component shows inline code and code blocks in a monospace font on iOS and Android. A block scrolls horizontally instead of wrapping. It is the native port of the headless Code and runs on Mob.

Overview of the Mob Code component for iOS and Android

Code is a pure Elixir Mob composite. You write it as a <MishkaCode> tag and pass the code in text. It sets the font of Mob's Text to "monospace", which falls back to the platform's own monospace face (Roboto Mono on Android, SF Mono on iOS).

Code has two modes. Inline code sits in a sentence and hugs its text, with no scrolling. A block, which you get with block={true}, fills the width, is padded, and scrolls horizontally, because code lines do not wrap and a long line would otherwise be cut off with no way to read the rest.

Code has no state and sends no events. It renders the text you pass.

Generate the code component

Run this from your Mob app's root to add the component to lib/<app>/components/:

bash
mix mishka.ui.gen.mob code

The generator registers the component's tag, so you can use it in ~MOB markup. The examples on this page use the mishka_ prefix of the showcase app (--module-prefix mishka_), so the tag is <MishkaCode>. Without a prefix the tag is <Code>.

Inline code

Inline code hugs its text and sits in a sentence.

Inline code

Card titled Inline, with the sentence Run mix mob.deploy to push, where mix mob.deploy sits in monospace inside a small white box, in the MishkaMob showcase app on Android
heex
<MishkaCode text="mix mob.deploy" />

Code block

A block fills the width, is padded, and scrolls horizontally. Code does not wrap.

Code block

Card titled Block, with two white full-width code blocks in monospace, a def render line and a Mob.Composite.register line, each cut off at the right edge
heex
<MishkaCode text="…" block={true} />

Code block without the scroller

Set scroll={false} and a long line is clipped at the edge of the block instead of scrolling.

Code block without the scroller

Card titled Without the scroller, with one white code block holding the monospace text a long line that will simply be clipped, wrapped over three lines
heex
<MishkaCode text="…" block={true} scroll={false} />

Code block colors

background and color are props, so you can draw a dark block in any theme.

Code block colors

Card titled Colours, with a dark navy code block holding light blue monospace text reading iex> Mob.Test.screen(node), in the MishkaMob showcase app on Android
heex
<MishkaCode text="…" block={true} background={0xFF0B1020} color={0xFF93C5FD} />

Props

Props of the <MishkaCode> tag.

PropTypeDefaultDescription
textstringnilThe code.
blockbooleanfalseRenders a block instead of inline code.
backgroundcolor / ARGB:surface_raisedFill.
colorcolor / ARGB:on_surfaceCode color.
text_sizesize token:smCode size.
paddingspacing / number:space_md for blocks, 4 for inlinePadding. Blocks and inline code use different defaults.
scrollbooleantrue for blocksScrolls a block horizontally instead of clipping it.
idstringNoneA native test tag, for finding a block whose text is long. It is a test handle, not a DOM id.

Differences from the web component

These parts of the web component are not ported or work differently:

  • The *_class attributes are not ported.
  • id is ported as a native test tag, not as a DOM id.
  • Syntax highlighting is not part of the headless component either. A native version would need per-token spans, which Mob's Text does not expose.