Code | Pillar UI library

Props

Corner

can be used to customize the corners of the code block. The corner prop accepts a string that can be one of the following values:

sharp: The code block will have sharp corners.
sm: The code block will have small, rounded corners.
md: The code block will have medium-sized, rounded corners.
lg: The code block will have large, rounded corners.
full: The code block will have rounded corners that fill the entire block.

console.log('Hello world Every thing is OK')console.log('Hello world Every thing is OK')console.log('Hello world Every thing is OK')console.log('Hello world Every thing is OK')console.log('Hello world Every thing is OK')console.log('Hello world Every thing is OK')console.log('Hello world Every thing is OK')

export const CodeCorners = () => {
  return (
    <Flex gap="sm" direction="column" justify="center">
      <Code corner="sharp">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code corner="sm">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code corner="md">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code corner="lg">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code corner="full">{`console.log('Hello world Every thing is OK')`}</Code>
    </Flex>
  )
}

Color

Type: string
Default: primary
Options: danger | warning | success | primary | secondary | bg

The color prop determines the color of the code. It accepts a string representing a color name or a color value in hex, rgb, rgba format.

export const CodeColors = () => {
  return (
    <Flex gap="sm" direction="column" justify="center">
      <Code color="dan">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code color="suc">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code color="war">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code color="pri">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code color="bg">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code color="sec">{`console.log('Hello world Every thing is OK')`}</Code>
    </Flex>
  )
}

Size

Type: string
Default: md
Options: 2xs | xs | sm | md | lg | xl | 2xl

The size prop determines the size of the code. It accepts a string representing a length in pixels.

export const CodeSizes = () => {
  return (
    <Flex gap="sm" direction="column" justify="center">
      <Code size="2xs">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code size="xs">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code size="sm">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code size="md">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code size="lg">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code size="xl">{`console.log('Hello world Every thing is OK')`}</Code>
      <Code size="2xl">{`console.log('Hello world Every thing is OK')`}</Code>
    </Flex>
  )
}

Use Case

The Code component is used to render code to the screen. It can be used to display code snippets, documentation, or even entire applications.

Implementation details

The Code component renders a block of text, with each line of code indented by four spaces. The Code component also has a few other props that can be used to customize the appearance of the code, such as the color, size, and background color.

Troubleshooting

Common issues when implementing the Code component can include incorrect positioning, incorrect styling, or issues with accessibility. Troubleshooting these issues may involve inspecting the HTML and CSS, checking for errors in the code, and testing with different devices and browsers.

Conclusion

The Code component is a useful UI element for rendering code to the screen. It can be implemented using HTML and CSS, or with a UI framework or library. When implementing the Code component, it's important to consider accessibility, TypeScript support, and troubleshooting common issues.

Pillar UI React Code Component documentation