📁 README.md - v1.0.1 Release

🎨 bertui-code

Zero-config syntax highlighting for React. Built exclusively for the BertUI ecosystem.

The simplest way to add beautiful, functional code blocks to your BertUI applications. Dark theme by default, copy button included, zero configuration required.

⚠️ BertUI Compatibility Note: bertui-code v1.0.1 is tested with BertUI's strict transpiler. See the BertUI Compatibility section for details.

✨ Features

• Zero-config by default - Just wrap your code
• Multiple themes - Dark, light, pink + custom colors
• Built-in copy button - One click to copy any code
• Line numbers - Optional, beautifully aligned
• Inline code snippets - Perfect for documentation
• 20+ language support - Auto-detection included
• Multi-variant tabs - Toggle between npm/pnpm/bun/yarn and more
• Zero dependencies - Except React (peer dependency)
• BertUI-certified - Tested with BertUI's strict transpiler

📦 Installation

bun add [email protected]
# or
npm install [email protected]
# or
pnpm add [email protected]
# or
yarn add [email protected]

🚀 Quick Start

import { Code, InlineCode, CodeVariants, CodeVariant } from 'bertui-code';

// Basic code block
<Code>
  const hello = "world";
  console.log(hello);
</Code>

// With line numbers
<Code showLineNumbers>
  function calculate(a, b) {
    return a + b;
  }
</Code>

// Package manager variants (NEW in v1.0.1!)
<CodeVariants>
  <CodeVariant label="npm">npm install bertui-code</CodeVariant>
  <CodeVariant label="pnpm">pnpm add bertui-code</CodeVariant>
  <CodeVariant label="bun">bun add bertui-code</CodeVariant>
  <CodeVariant label="yarn">yarn add bertui-code</CodeVariant>
</CodeVariants>

// Inline code
<p>
  Use the <InlineCode>useState</InlineCode> hook for state management.
</p>

🎯 NEW IN v1.0.1: Multi-Variant Code Blocks

Toggle between different versions of the same code snippet with zero config:

<CodeVariants theme="dark" defaultVariant="bun">
  <CodeVariant label="npm">npm run dev</CodeVariant>
  <CodeVariant label="pnpm">pnpm dev</CodeVariant>
  <CodeVariant label="bun">bun dev</CodeVariant>
  <CodeVariant label="yarn">yarn dev</CodeVariant>
</CodeVariants>

Features:

• ✅ Auto-generates tabs from labels
• ✅ Theme-aware styling (dark/light/pink)
• ✅ Sticky tabs for long docs (stickyTabs={true})
• ✅ Configurable tab position (tabPosition="bottom")
• ✅ Keyboard accessible, ARIA compliant

⚠️ BertUI Compatibility (CRITICAL)

bertui-code v1.0.1 is certified for BertUI's strict transpiler. Follow these rules and it will never crash:

// ✅ GOOD - BertUI never looks inside string variables
const myCode = 
'function hello(name) {\n' +
'  return "Hello " + name + "!";\n' +
'}';

<Code>{myCode}</Code>

// ✅ GOOD - Even JSX/TypeScript works in strings!
const tsCode = 
'interface User {\n' +
'  id: string;\n' +
'  name: string;\n' +
'}\n';

<Code language="typescript">{tsCode}</Code>

❌ NEVER: Use template literals in JSX (ALWAYS CRASHES)

// ❌ BAD - BertUI WILL crash with "Expected } but found :"
<Code>
  {`function hello() {
    return "world";
  }`}
</Code>

✅ DO: Use React.createElement pattern

// ✅ GOOD - Works in BertUI
import React from 'react';

export default function Page() {
  return React.createElement(Code, {
    language: 'javascript',
    showLineNumbers: true
  }, 'const x = 1;');
}

// ✅ GOOD - Always use ={true}
<CodeVariants stickyTabs={true}>

// ❌ BAD - BertUI crashes on shorthand
<CodeVariants stickyTabs>

📋 BertUI Compatibility Checklist

| Pattern | Status | Why | |---------|--------|-----| | const code = '...' | ✅ SAFE | Strings are opaque to BertUI | | <Code>{`code`}</Code> | ❌ CRASH | BertUI parses template literal content | | language="typescript" | ⚠️ MAY CRASH | Only safe if code is in string variable | | stickyTabs={true} | ✅ SAFE | Explicit value works | | stickyTabs | ❌ CRASH | Shorthand props not supported | | React.createElement | ✅ SAFE | No JSX transform needed |

🎨 Themes & Colors

Built-in Themes

<Code theme="dark">   // Default
<Code theme="light">  // Light mode
<Code theme="pink">   // Pink mode

Custom Colors

<Code 
  colors={{
    background: '#0a0a0a',
    text: '#00ff00',
    header: '#1a1a1a',
    border: '#00ff00',
    meta: '#00ff00',
    button: '#00ff00'
  }}
>
  // Custom hacker theme
</Code>

📖 API Reference

<Code /> Component

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | string | Required | The code to display | | language | string | 'javascript' | Programming language | | theme | 'dark' \| 'light' \| 'pink' | 'dark' | Color theme | | colors | Object | {} | Custom color overrides | | showLineNumbers | boolean | false | Show line numbers | | showCopyButton | boolean | true | Show copy button | | className | string | '' | Additional CSS classes |

<CodeVariants /> Component (NEW)

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | CodeVariant[] | Required | Array of variants | | theme | 'dark' \| 'light' \| 'pink' | 'dark' | Color theme | | defaultVariant | number \| string | 0 | Default tab by index or label | | stickyTabs | boolean | false | Make tabs sticky on scroll | | tabPosition | 'top' \| 'bottom' | 'top' | Tab bar position | | showCopyButton | boolean | true | Show copy button | | colors | Object | {} | Custom colors for code | | tabColors | Object | {} | Custom colors for tabs |

<CodeVariant /> Component (NEW)

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | string | Required | The code for this variant | | label | string | Required | Tab label (npm, pnpm, etc) | | language | string | 'javascript' | Language for this variant | | showLineNumbers | boolean | false | Show line numbers |

<InlineCode /> Component

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | string | Required | The inline code | | theme | 'dark' \| 'light' \| 'pink' | 'dark' | Color theme |

💡 Best Practices for BertUI

1. Store all code examples in string variables

// code-examples.js
export const npmExample = 'npm install bertui-code';
export const jsExample = 
'function add(a, b) {\n' +
'  return a + b;\n' +
'}';

// page.jsx
import { jsExample } from './code-examples.js';
<Code>{jsExample}</Code>

2. Use string concatenation for readability

const longCode = 
'import React from "react";\n' +
'\n' +
'export function Button({ children }) {\n' +
'  return (\n' +
'    <button className="btn">\n' +
'      {children}\n' +
'    </button>\n' +
'  );\n' +
'}\n';

3. Keep TypeScript in .ts files

// ✅ GOOD - In a .ts file
export const tsCode = 'const name: string = "John";';

// ❌ BAD - In a .jsx file
const tsCode = 'const name: string = "John";'; // BertUI may crash!

4. Test your code blocks

// test-page.jsx - Create a test page to verify BertUI compatibility
import { Code } from 'bertui-code';
const testCode = 'console.log("Hello BertUI!");';

export default function TestPage() {
  return React.createElement(Code, {}, testCode);
}

📚 Examples

Package Manager Installers

<CodeVariants theme="dark" defaultVariant="bun">
  <CodeVariant label="npm">npm install bertui-code</CodeVariant>
  <CodeVariant label="pnpm">pnpm add bertui-code</CodeVariant>
  <CodeVariant label="bun">bun add bertui-code</CodeVariant>
  <CodeVariant label="yarn">yarn add bertui-code</CodeVariant>
</CodeVariants>

Language Comparison

<CodeVariants theme="light">
  <CodeVariant label="JavaScript" language="javascript">
    {javascriptExample}
  </CodeVariant>
  <CodeVariant label="TypeScript" language="typescript">
    {typescriptExample}
  </CodeVariant>
  <CodeVariant label="Python" language="python">
    {pythonExample}
  </CodeVariant>
</CodeVariants>

API Examples

<CodeVariants theme="dark" tabPosition="bottom" stickyTabs={true}>
  <CodeVariant label="cURL" language="bash">{curlExample}</CodeVariant>
  <CodeVariant label="fetch" language="javascript">{fetchExample}</CodeVariant>
  <CodeVariant label="axios" language="javascript">{axiosExample}</CodeVariant>
</CodeVariants>

🐛 Known Issues & Workarounds

Issue: BertUI crashes with Expected "}" but found ":"

Cause: TypeScript syntax in .jsx file or template literal in JSX
Fix: Move code to string variable outside component

Issue: React/jsx-dev-runtime not found

Cause: BertUI doesn't support React 18 automatic JSX runtime
Fix: Use React.createElement or add /** @jsx React.createElement */

Issue: Shorthand props crash

Cause: BertUI doesn't support {stickyTabs} shorthand
Fix: Always use stickyTabs={true}

📦 Project Structure

bertui-code/
├── src/
│   ├── Code.js           # Main code block component
│   ├── CodeVariants.js   # Multi-variant tabs (NEW)
│   ├── CodeVariant.js    # Individual variant (NEW)
│   ├── CopyButton.js     # Copy button component
│   ├── InlineCode.js     # Inline code component
│   ├── ThemeProvider.js  # Theme context (optional)
│   └── index.js          # Main exports
├── dist/                 # Built files
├── package.json          # v1.0.1
└── README.md            # You are here

🤝 Compatibility

• BertUI: ✅ v1.0.1 certified - Tested with strict transpiler
• React: ✅ 18.0.0+ (peer dependency)
• Browsers: ✅ Chrome, Firefox, Safari, Edge
• Bun: ✅ Recommended package manager

📄 License

MIT © Pease Ernest