# code-block-pro/1.27.6/src/editor/components/headers/StringSmall.tsx

Code Block Pro – Beautiful Syntax Highlighting, version 1.27.6. 34 lines.

- Page: https://pluginprobe.com/plugins/code-block-pro/1.27.6/code/src/editor/components/headers/StringSmall.tsx
- Raw: https://pluginprobe.com/plugins/code-block-pro/1.27.6/raw/src/editor/components/headers/StringSmall.tsx
- Modified: 2023-08-14T00:10:16+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/code-block-pro/1.27.6/code/src/editor/components/headers/StringSmall.tsx#L10-L20`.

```tsx
import { Attributes, Lang } from '../../../types';
import { computeLineHighlightColor, findTextColor } from '../../../util/colors';
import { languages } from '../../../util/languages';

export const StringSmall = (attributes: Attributes) => {
    const { language, bgColor, textColor, headerString } = attributes;
    let textBorder = computeLineHighlightColor(textColor, attributes);

    if (textColor?.startsWith('var(')) {
        textBorder = findTextColor(attributes) ?? textColor;
    }
    return (
        <span
            style={{
                display: 'flex',
                alignItems: 'center',
                padding: '10px 0px 0 16px',
                fontSize: '0.8em',
                width: '100%',
                textAlign: 'left',
                backgroundColor: bgColor,
                fontStyle: 'italic',
                color: textColor,
            }}>
            <span
                style={{
                    borderBottom: `1px solid ${textBorder}`,
                }}>
                {headerString || languages[language as Lang]}
            </span>
        </span>
    );
};

```