Styleframe Logo
Inline Text

Code Element

Style inline code and preformatted text blocks with configurable font family, font size, and spacing using the useCodeElement and usePreElement composables.
Part of the Global Preset:useCodeElement and usePreElement are included in the Global Preset (useGlobalPreset) and you can configure them through the preset's code and pre options. For most projects, applying them via the preset is the recommended approach.

Overview

The code composables style inline code snippets and preformatted text blocks. The useCodeElement composable targets code and samp elements, while usePreElement configures pre blocks with scroll overflow and nested code resets.

useCodeElement

function useCodeElement(
    s: Styleframe,
    options?: WithThemes<CodeElementConfig>
): CodeElementResult
styleframe.config.ts
import { styleframe } from 'styleframe';
import { useCodeElement } from '@styleframe/theme';

const s = styleframe();

const { codeFontFamily, codeFontSize } = useCodeElement(s);

export default s;

Default Values

OptionDefaultVariableExport
fontFamily"@font-family.mono"--code--font-familycodeFontFamily
fontSize"0.875em"--code--font-sizecodeFontSize

usePreElement

function usePreElement(
    s: Styleframe,
    options?: WithThemes<PreElementConfig>
): PreElementResult
styleframe.config.ts
import { styleframe } from 'styleframe';
import { usePreElement } from '@styleframe/theme';

const s = styleframe();

const { preFontFamily, preFontSize, preMarginBottom } = usePreElement(s);

export default s;

Default Values

OptionDefaultVariableExport
fontFamily"@font-family.mono"--pre--font-familypreFontFamily
fontSize"0.875em"--pre--font-sizepreFontSize
marginBottom"@spacing"--pre--margin-bottompreMarginBottom

The composable also applies fixed styles: display: block, overflow-x: auto, and margin-top: 0. Nested code elements inside pre have their background, color, and font size reset to inherit from the parent.

Custom Values

styleframe.config.ts
import { styleframe } from 'styleframe';
import { useCodeElement, usePreElement } from '@styleframe/theme';

const s = styleframe();

const { codeFontFamily } = useCodeElement(s, {
    fontFamily: '"Fira Code", monospace',
    fontSize: '0.8em',
});

const { preMarginBottom } = usePreElement(s, {
    fontFamily: '"Fira Code", monospace',
    marginBottom: '@spacing.lg',
});

export default s;

Best Practices

  • Use a monospace font: Both composables default to @font-family.mono for consistent code rendering.
  • Use em units for font size: The default 0.875em scales relative to the parent, keeping inline code proportional to surrounding text.
  • Keep both in sync: When customizing the font family, apply the same value to both useCodeElement and usePreElement for visual consistency.
  • Rely on the nested code reset: The pre > code reset ensures inline code styles do not leak into code blocks.

Abbreviation

Style abbreviation elements with configurable cursor and text decoration using the useAbbrElement composable.

Kbd

Style keyboard input elements with configurable background, color, font, border radius, and padding using the useKbdElement composable.