grasscnGitHub

Code Block

Selectable code and copy actions using Minecraft text and palette.

Preview

world.ts
const world = "Minecraft";
Loading example...
To run this copied example, install these items using the linked CLI or manual instructions:

Usage

This page previews the installable CodeBlock renderer. The surrounding preview/code switch and source viewers belong to the documentation site. CodeBlockContent defaults to wrap=false, lineNumbers=false and startLine=1. CopyButton needs the exact source value: it never extracts or reconstructs text from rendered children.

Composition

For syntax highlighting install the delivered useHighlightedCode hook and highlight-code library with Shiki, then render returned lines through CodeBlockLine. Diff variants added/removed/highlighted are shown below. Copy feedback follows the clipboard promise, announces success politely, resets after two seconds and leaves success unset when the clipboard is unavailable or rejects the request. This installed button does not announce a failure; add application feedback if your workflow requires it.

const seed = 1;const seed = 42;
Loading example...
To run this copied example, install these items using the linked CLI or manual instructions:

Installation

Loading registry address

Component source

This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.

Component implementationcomponents/ui/code-block.tsx · tsx
"use client";

import * as React from "react";

import "./minecraft-code-block.css";
import { Button } from "./button";
import { ChatChildren, MessageScale } from "./message";
import { minecraftLoadingGlyphs } from "./minecraft-loading-glyphs";
import {
  isMinecraftDocumentText,
  isMinecraftSelectableTextElement,
  isMinecraftTextContent,

Interactive playground

greeting.ts
const greeting = "Hello 世界";
// Keep building!
Minecraft colors
Select the code or copy it