Waffles - Code

Usage guidance

The Code component can be used to highlight small snippets of code within other text. They are often used to share code with other developers, in a distinct and easily copyable state.

There are four sizes for Code, but by default it will inherit 86% of the font-size of it's parent. If you wish to use the component as a standalone element, without surrounding text, then you must specify the size as one of the other available values: small, medium, large or xlarge.

Best practices

Examples

Basic usage

You can install Waffles components library by running npm install @datacamp/waffles with npm or yarn add @datacamp/waffles with yarn.

Sizes

npm install @datacamp/wafflesnpm install @datacamp/wafflesnpm install @datacamp/wafflesnpm install @datacamp/waffles

Playground

import { Code } from '@datacamp/waffles/code';
import { Paragraph } from '@datacamp/waffles/paragraph';

function Playground() {
  return (
    <Paragraph size="medium">
      You can use regular <Code>Button</Code> component as a link by{' '}
      passing <Code>a</Code> via <Code>as</Code> prop.
    </Paragraph>
  );
}

import { Code } from '@datacamp/waffles/code';
import { Paragraph } from '@datacamp/waffles/paragraph';

function Playground() {
  return (
    <Paragraph size="medium">
      You can use regular <Code>Button</Code> component as a link by{' '}
      passing <Code>a</Code> via <Code>as</Code> prop.
    </Paragraph>
  );
}

Live

Props

Code

In addition to the props listed below, Code accepts all props from React.HTMLAttributes<HTMLPreElement>.

Name	Type	Description
`as`	`codepre`	The element used to render this component. Default: `code`
`children`Required	`React.ReactNode`	The content of the inline Code sample.
`inverted`	`boolean`	Sets the style of the Code suitable for dark backgrounds. Default: `false` DEPRECATED Will be removed in `v6` - use Waffles' Theming instead.
`size`	`inheritlargemediumsmallxlarge`	Defines the font size of the Code sample. In general should be specified only when used as a standalone element. Default: `inherit`

Imports

You can import the following components, utilities or types from this module:

import { Code } from '@datacamp/waffles/code';
import type { CodeProps } from '@datacamp/waffles/code';