Elanor

Inline code

Last updated

Code, file names, and commands within running text. For code on its own lines, use Code snippet.

Run pnpm install after changing package.json.
Code
demo.tsx 
import {InlineCode, Text} from '@earendil-works/elanor-react';

export default function InlineCodeDemo() {
  return (
    <Text>
      Run <InlineCode>pnpm install</InlineCode> after changing <InlineCode>package.json</InlineCode>
      .
    </Text>
  );
}

Usage

import {InlineCode} from '@earendil-works/elanor-react';

<InlineCode>pnpm install</InlineCode>;

Inline code uses semantic.fontFamily.code and semantic.color.text.code at semantic.number.fontScale.inlineCode times the size of the surrounding text, so code in a heading grows with it. The default soft variant adds a semantic.color.background.fill.secondary fill. Long identifiers wrap.

Plain

Use variant="plain" in headings, tables, and dense text.

Edit package.json to change the package version.
Code
plain.tsx 
import {InlineCode, Text} from '@earendil-works/elanor-react';

export default function InlineCodePlain() {
  return (
    <Text>
      Edit <InlineCode variant="plain">package.json</InlineCode> to change the package version.
    </Text>
  );
}

Program output

Use render={<samp />} for output from a program, such as an error message.

If the build prints Error: missing token, run the generator again.
Code
output.tsx 
import {InlineCode, Text} from '@earendil-works/elanor-react';

export default function InlineCodeOutput() {
  return (
    <Text>
      If the build prints <InlineCode render={<samp />}>Error: missing token</InlineCode>, run the
      generator again.
    </Text>
  );
}

API

InlineCode

Code within running text. Renders code by default.

PropTypeDefaultDescription
variantInlineCodeVariant'soft'Visual treatment. plain removes the fill.

Renders <code>. Also accepts its HTML attributes, ref, and render.

↑↓to select↵to openEscto close