# code-block-pro/1.13.0/src/editor/components/headers/SimpleString.tsx

Code Block Pro – Beautiful Syntax Highlighting, version 1.13.0. 31 lines.

- Page: https://pluginprobe.com/plugins/code-block-pro/1.13.0/code/src/editor/components/headers/SimpleString.tsx
- Raw: https://pluginprobe.com/plugins/code-block-pro/1.13.0/raw/src/editor/components/headers/SimpleString.tsx
- Modified: 2023-02-06T00:28:04+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.13.0/code/src/editor/components/headers/SimpleString.tsx#L10-L20`.

```tsx
import { colord, AnyColor } from 'colord';
import { Attributes, Lang } from '../../../types';
import { languages } from '../../../util/languages';

export const SimpleString = ({
    language,
    bgColor,
    textColor,
    headerString,
}: Partial<Attributes>) => {
    const bgC = colord(bgColor as AnyColor);
    const bg = bgC.isDark() ? bgC.lighten(0.05) : bgC.darken(0.05);
    const textC = colord(textColor as AnyColor);
    const text = textC.isDark() ? textC.lighten(0.05) : textC.darken(0.05);
    return (
        <span
            style={{
                display: 'flex',
                alignItems: 'center',
                padding: '10px 0px 10px 16px',
                marginBottom: '-2px',
                width: '100%',
                textAlign: 'left',
                backgroundColor: bg.toHex(),
                color: text.toHex(),
            }}>
            {headerString || languages[language as Lang]}
        </span>
    );
};

```