Components

CodeBlock

Stable

Client-side syntax-highlighted code display with title bar and copy button. Uses Shiki with the dark-plus theme. Distinct from the documentation site's server-only CodeBlock.

Basic

npm install @mnee-ui/ui

With title

Install the package

npm install @mnee-ui/ui

With filename

globals.css

:root {
  --brand: #D97706;
  --surface: #ffffff;
}

JavaScript with title

Handle payment submission:

async function handleSubmit() {
  const { submittedEl } = await elements.submit();
  if (submittedEl.selectedPaymentMethod === "YOUR_CPMT_ID") {
    const url = await fetchMNEEPayCheckout(submittedEl);
    window.location.href = url;
  }
}

Usage

import { CodeBlock } from "@mnee-ui/ui"

Props

Prop	Type	Default	Description
code	string	—	The code string to highlight and display
language	string	"bash"	Shiki language: bash, javascript, typescript, tsx, jsx
title	string	—	Optional header bar label. Also moves copy button to header when set.
filename	string	—	Optional filename label displayed above the code block.
className	string	—	Layout utilities (margin, width)