Code

Code is a component used to display inline code. It is composed from the Box component with a font family of `mono` for displaying code.

View Source

@chakra-ui/layout

Import#

import { Code } from '@fluidtruck/core'

Usage#

Colors#

You can change the color scheme of the component by passing the colorScheme prop.

The Code component is a single part component. All of the styling is applied directly to the code element.

To learn more about styling single part components, visit the Component Style page.

Theming properties#

The properties that affect the theming of the Code component are:

variant: The visual variant of the code. Defaults to subtle.
colorScheme: The color scheme of the code. Defaults to gray.

Theming utilities#

defineStyle: a function used to create style objects.
defineStyleConfig: a function used to define the style configuration for a single part component.

import { defineStyle, defineStyleConfig } from '@fluidtruck/core'

Customizing the default theme#

import { defineStyle, defineStyleConfig } from '@fluidtruck/core'

const outline = defineStyle({
  border: '2px dashed', // change the appearance of the border
  borderRadius: 0, // remove the border radius
  fontSize: 'md', // change the font size
  fontWeight: 'semibold', // change the font weight
})

export const codeTheme = defineStyleConfig({
  variants: { outline },
})

After customizing the code theme, we can import it in our theme file and add it in the components property:

import { extendTheme } from '@fluidtruck/core'
import { codeTheme } from './components/code'

export const theme = extendTheme({
  components: { Code: codeTheme },
})

This is a crucial step to make sure that any changes that we make to the Code theme are applied.

Adding a custom variant#

Let's assume we want to include a custom branded variant. Here's how we can do that:

import { defineStyle, defineStyleConfig } from '@fluidtruck/core'

const brandPrimary = defineStyle({
  background: 'orange.500',
  color: 'white',
  fontFamily: 'mono',
  fontWeight: 'normal',

  // let's also provide dark mode alternatives
  _dark: {
    background: 'orange.300',
    color: 'orange.800',
  }
})

export const codeTheme = defineStyleConfig({
  variants: { brandPrimary },
})

// Now we can use the new `brandPrimary` variant
<Code variant="brandPrimary">...</Code>

Using a custom color scheme#

Let's assume we want to use our own custom color scale based on our brand. We'd need to define the color scale first in the main theme file:

import { extendTheme } from '@fluidtruck/core'

export const theme = extendTheme({
  colors: {
    brand: {
      50: '#f7fafc',
      ...
      500: '#718096',
      ...
      900: '#171923',
    }
  }
})

Then, we can use the custom color scale as the color scheme for the Code:

<Code colorScheme='brand'>...</Code>

Changing the default properties#

Let's assume we want to change the default size, variant or color scheme of every code in our app. Here's how we can do that:

import { defineStyleConfig } from '@fluidtruck/core'

export const codeTheme = defineStyleConfig({
  defaultProps: {
    variant: 'outline',
    colorScheme: 'brand',
  },
})

// This saves you time, instead of manually setting the size,
// variant and color scheme every time you use a Code:
<Code variant="outline" colorScheme="brand">...</Code>

Code

Import#

Usage#

Colors#

Props#

`colorScheme`

`size`