Styleframe Logo
Composables

Mark Element

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

Overview

The useMarkElement composable styles the mark element for highlighting text. It creates CSS variables for the background color, text color, and padding on each side.

useMarkElement

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

const s = styleframe();

const {
    markBackground,
    markColor,
    markPaddingTop,
    markPaddingRight,
    markPaddingBottom,
    markPaddingLeft,
} = useMarkElement(s);

export default s;

Default Values

OptionDefaultVariableExport
background"@color.warning-100"--mark--backgroundmarkBackground
color"inherit"--mark--colormarkColor
paddingTop"0.1875rem"--mark--padding-topmarkPaddingTop
paddingRight"0.375rem"--mark--padding-rightmarkPaddingRight
paddingBottom"0.1875rem"--mark--padding-bottommarkPaddingBottom
paddingLeft"0.375rem"--mark--padding-leftmarkPaddingLeft

The default configuration includes a dark theme that uses a darker background: background: "@color.warning-700".

Custom Values

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

const s = styleframe();

const { markBackground } = useMarkElement(s, {
    background: '@color.info-100',
    paddingTop: '0.25rem',
    paddingRight: '0.5rem',
    paddingBottom: '0.25rem',
    paddingLeft: '0.5rem',
});

export default s;

Best Practices

  • Use warm highlight colors: The default @color.warning-100 provides a familiar yellow-highlight effect. Use @color.info-100 for a cooler blue alternative.
  • Inherit the text color: The default color: "inherit" keeps marked text readable against its background without overriding the parent color.
  • Customize per-theme: The built-in dark theme uses @color.warning-700 for a darker highlight. Override the themes option if your dark mode needs different values.

Lists

Style ordered and unordered list elements with configurable margin and padding using the useOlElement and useUlElement composables.

Output

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