Code

Overview

The Code component renders a styled <code> element with Bulma helper class integration.

Use it for inline code snippets, variable names, function names, file paths, or any short technical content that should be displayed in a monospace font.

info

For multi-line code blocks, use the Pre component instead, optionally with a Code component inside it.

---

Import

import { Code } from '@allxsmith/bestax-bulma';

---

Usage

Default Code

The default usage renders inline code in a monospace font.

<Code>console.log("Hello, World!")</Code>

Variable Name

Reference variable names inline within text.

<Paragraph>
  The <Code>userName</Code> variable stores the current user's name.
</Paragraph>

Function Call

Reference function or method calls.

<Paragraph>
  Use <Code>Array.map()</Code> to transform each element in the array.
</Paragraph>

Command Line

Display command line instructions.

<Paragraph>
  Run <Code>pnpm install</Code> to install the dependencies.
</Paragraph>

Colored Code

Apply text color for syntax highlighting or emphasis.

<Code textColor="primary">import React from "react"</Code>

Code with Background

Add background color and padding for visibility.

<Code bgColor="light" p="1">
  const x = 42
</Code>

All Colors

Display code in all Bulma theme colors.

<Block display="flex" flexDirection="column" gap="2">
  <Code textColor="primary">primary code</Code>
  <Code textColor="link">link code</Code>
  <Code textColor="info">info code</Code>
  <Code textColor="success">success code</Code>
  <Code textColor="warning">warning code</Code>
  <Code textColor="danger">danger code</Code>
</Block>

File Path

Display file or directory paths.

<Paragraph>
  Edit the configuration file at <Code>src/config/settings.ts</Code> to change
  the default values.
</Paragraph>

Keyboard Shortcuts

Display keyboard shortcuts.

<Paragraph>
  Press <Code>Ctrl + C</Code> to copy and <Code>Ctrl + V</Code> to paste.
</Paragraph>

---

Accessibility

• Code Semantics: Screen readers may indicate code content differently, helping users understand it's technical content.
• Monospace Font: The <code> element typically renders in a monospace font, aiding readability of technical content.
• Context: Provide context around code snippets so users understand what the code represents.

info

Use Code for short inline snippets. For multi-line code blocks that need to preserve whitespace and formatting, use the Pre component.

---

Related Components

• Pre: For multi-line preformatted code blocks.
• Figure: For code figures with captions.
• Paragraph: For text paragraphs containing code.
• Helper Props: Bulma helper props for spacing, color, etc.

---

Additional Resources

• MDN: code element
• Storybook: Code Stories

---

Props

Prop	Type	Default	Description
className	string	—	Additional CSS classes to apply.
textColor	Bulma color | 'inherit' | 'current'	—	Text color helper.
bgColor	Bulma color | 'inherit' | 'current'	—	Background color helper.
children	React.ReactNode	—	Code content to render inside the element.
...	All standard HTML attributes and Bulma helper props	—	See Helper Props

---

CSS & Sass Variables

Bulma declares these variables globally rather than on Code's own element, so the defaults come from the theme. Override them anywhere above the component — on the element itself (via className/style) for a one-off, or on :root to retheme every instance. See Theme.

CSS Variable	Sass Variable	Default
--bulma-code-family	$code-family	var(--bulma-family-code)
--bulma-code-padding	$code-padding	0.25em 0.5em 0.25em
--bulma-code-weight	$code-weight	normal
--bulma-code-size	$code-size	0.875em