Styleframe Logo
Composables

Code Element

Style inline code and preformatted text blocks with configurable font family, font size, and spacing using the useCodeElement and usePreElement composables.

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.

Caption

Style table caption elements with configurable color, padding, and text alignment using the useCaptionElement composable.

Definition Lists

Style definition list elements (dl, dt, dd) with configurable margin, font weight, and spacing using the useDlElement, useDtElement, and useDdElement composables.