Usage

The CodeBlock component is used to present JSON data or Code snippets in a formatted and readable manner. It allows you to pass in JSON data with json prop, or Code snippet as code prop, which will be displayed with syntax highlighting and proper indentation for better readability.

Import

import { CodeBlock } from '@passfort/castle'
content_copy
Copy

Example with JSON data

<CodeBlock
  json={{
    entityId: '31CE199BCB1CBD596602E22B763B1B16',
    namedConfiguration: 'eba',
    namedConfigurationMode: 'waterfall',
    namedConfigurationSources: ['curated', 'register'],
    outputStructure: {
      'firmographics.identifiers': {
        mode: 'waterfall',
        sources: ['curated', 'register'],
      },
    },
    'firmographics.contactInformation': {
      mode: 'waterfall',
      sources: ['curated', 'register'],
    },
  }}
/>
<CodeBlock
  json={{
    entityId: '31CE199BCB1CBD596602E22B763B1B16',
    namedConfiguration: 'eba',
    namedConfigurationMode: 'waterfall',
    namedConfigurationSources: ['curated', 'register'],
    outputStructure: {
      'firmographics.identifiers': {
        mode: 'waterfall',
        sources: ['curated', 'register'],
      },
    },
    'firmographics.contactInformation': {
      mode: 'waterfall',
      sources: ['curated', 'register'],
    },
  }}
/>
content_copy
Copy
live example

Example with Code snippet

The indentation of the code snippet is the same as passed in the code prop.

<CodeBlock
  canEdit
  fullHeight
  code={`<Box>
  <Text>
    Example with Code snippet
  </Text>
</Box>`}
/>
<CodeBlock
  canEdit
  fullHeight
  code={`<Box>
  <Text>
    Example with Code snippet
  </Text>
</Box>`}
/>
content_copy
Copy
live example

Will work the same if passed with children.