# code-block-pro/1.6.0/src/front/BlockOutput.tsx

Code Block Pro – Beautiful Syntax Highlighting, version 1.6.0. 36 lines.

- Page: https://pluginprobe.com/plugins/code-block-pro/1.6.0/code/src/front/BlockOutput.tsx
- Raw: https://pluginprobe.com/plugins/code-block-pro/1.6.0/raw/src/front/BlockOutput.tsx
- Modified: 2022-09-10T00:48:38+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.6.0/code/src/front/BlockOutput.tsx#L10-L20`.

```tsx
import { RichText, useBlockProps as blockProps } from '@wordpress/block-editor';
import { HeaderType } from '../editor/components/HeaderSelect';
import { Attributes } from '../types';
import { fontFamilyLong, maybeClamp } from '../util/fonts';
import { CopyButton } from './CopyButton';
import './style.css';

export const BlockOutput = ({ attributes }: { attributes: Attributes }) => (
    <div
        {...blockProps.save({
            className: attributes.disablePadding
                ? 'padding-disabled'
                : undefined,
        })}
        data-code-block-pro-font-family={attributes.fontFamily}
        style={{
            fontSize: maybeClamp(attributes.fontSize, attributes.clampFonts),
            // Tiny check to avoid block invalidation error
            fontFamily: fontFamilyLong(attributes.fontFamily),
            lineHeight: maybeClamp(
                attributes.lineHeight,
                attributes.clampFonts,
            ),
        }}>
        {attributes.code?.length > 0 ? (
            <>
                <HeaderType {...attributes} />
                {attributes.copyButton && (
                    <CopyButton attributes={attributes} />
                )}
                <RichText.Content value={attributes.codeHTML} />
            </>
        ) : null}
    </div>
);

```