Styleframe Logo
Composables

Output Elements

Style output and sample output elements using the useOutputElement and useSampElement composables.

Overview

The output composables style HTML elements that represent program output. The useOutputElement composable sets the display mode of the output element, while useSampElement configures the font family for samp (sample output) elements.

useOutputElement

function useOutputElement(s: Styleframe): void
styleframe.config.ts
import { styleframe } from 'styleframe';
import { useOutputElement } from '@styleframe/theme';

const s = styleframe();

useOutputElement(s);

export default s;

This composable takes no configuration options, creates no CSS custom properties, and returns void. It sets display: inline-block on output elements, giving them block-level sizing while allowing them to flow inline.

useSampElement

function useSampElement(
    s: Styleframe,
    options?: WithThemes<SampElementConfig>
): SampElementResult
Good to know: The useCodeElement composable also applies styles to samp elements via its code, samp selector. Use useSampElement only when you need separate control over the samp element's font family.
styleframe.config.ts
import { styleframe } from 'styleframe';
import { useSampElement } from '@styleframe/theme';

const s = styleframe();

const { sampFontFamily } = useSampElement(s);

export default s;

Default Values

OptionDefaultVariableExport
fontFamily"@font-family.mono"--samp--font-familysampFontFamily

Custom Values

styleframe.config.ts
import { styleframe } from 'styleframe';
import { useSampElement } from '@styleframe/theme';

const s = styleframe();

const { sampFontFamily } = useSampElement(s, {
    fontFamily: '"Fira Code", monospace',
});

export default s;

Best Practices

  • Use a monospace font: Sample output should use a monospace font to distinguish it from regular prose text.
  • Keep consistent with code: When customizing the font family, use the same value as useCodeElement for visual consistency across code-related elements.

Mark

Style highlighted text elements with configurable background, color, and padding using the useMarkElement composable.

Paragraphs

Style paragraph elements with configurable top and bottom margins using the useParagraphElement composable.