Skip to main content

Pre

Overview​

The Pre component renders a styled <pre> element with Bulma helper class integration.

Use it for multi-line code blocks, terminal output, ASCII art, or any content where whitespace formatting must be preserved.

info

Often used together with the Code component for semantically correct code blocks: <Pre><Code>...</Code></Pre>.

Import​

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

Usage​

Default Pre​

The default usage preserves whitespace and line breaks.

<Pre>{`function hello() {
  console.log("Hello, World!");
}`}</Pre>

With Code Element​

Combine with Code for semantically correct code blocks.

<Pre>
  <Code>{`const greeting = "Hello";
const name = "World";
console.log(\`\${greeting}, \${name}!\`);`}</Code>
</Pre>

Dark Background​

Create a terminal-like appearance with dark background and light text.

<Pre bgColor="dark" textColor="white" p="4">{`pnpm add @allxsmith/bestax-bulma
pnpm build`}</Pre>

Light Background​

Use a light background for a subtle code block.

<Pre bgColor="light" p="4">{`{
  "name": "my-app",
  "version": "1.0.0"
}`}</Pre>

Terminal Output​

Style terminal output with appropriate colors.

<Pre bgColor="dark" textColor="success" p="4">{`$ pnpm build
> @allxsmith/bestax-bulma@2.0.0 build
> tsc && vite build

vite v6.0.0 building for production...
✓ 123 modules transformed.
dist/index.js  45.23 kB
✓ built in 2.34s`}</Pre>

Multiple Code Blocks​

Display different code examples side by side.

<Block display="flex" flexDirection="column" gap="4">
  <Pre bgColor="light" p="3">
    <Code>{`// JavaScript
const add = (a, b) => a + b;`}</Code>
  </Pre>
  <Pre bgColor="light" p="3">
    <Code>{`// TypeScript
const add = (a: number, b: number): number => a + b;`}</Code>
  </Pre>
</Block>

Primary Accent​

Use color for comments or special sections.

<Pre textColor="primary" p="3">{`// Important configuration
const config = {
  debug: true,
  verbose: true
};`}</Pre>

Accessibility​

  • Whitespace Preservation: The <pre> element preserves all whitespace, which is important for code formatting.
  • Scrolling: Consider horizontal scrolling for long lines to prevent layout issues.
  • Screen Readers: Preformatted text is typically announced as such by screen readers.
info

For code blocks, wrap content in both <Pre> and <Code> for proper semantics: <Pre><Code>...</Code></Pre>.

  • Code: For inline code snippets (often used inside Pre).
  • Figure: For code figures with captions.
  • Helper Props: Bulma helper props for spacing, color, etc.

Additional Resources​

Props​

PropTypeDefaultDescription
classNamestring—Additional CSS classes to apply.
textColorBulma color | 'inherit' | 'current'—Text color helper.
bgColorBulma color | 'inherit' | 'current'—Background color helper.
childrenReact.ReactNode—Preformatted content to render.
...All standard <pre> attributes and Bulma helper props—See Helper Props

CSS & Sass Variables​

Bulma declares these variables globally rather than on Pre'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 VariableSass VariableDefault
--bulma-pre-font-size$pre-font-size0.875em
--bulma-pre-padding$pre-padding1.25rem 1.5rem
--bulma-pre-code-font-size$pre-code-font-size1em