React Bootstrap logoReact Bootstrap

Code

基础排版

基于 Bootstrap 5 的行内代码组件，用于在文本中展示代码片段、命令与变量名，配合 pre 元素可呈现代码块，样式随父元素字号缩放

Component Demo

Basic usage and examples of the Code component

基础用法

在文档中引用行内代码，例如 Array.from() 方法。

命令与包名

使用 npm install 安装 react-bootstrap 依赖包。

代码块

import { Button } from '@dafengzhen/react-bootstrap';

const App = () => <Button variant="primary">Hello</Button>;

与按键组件对比

复制使用 ctrl + c，安装依赖使用 npm install。

API Documentation

Complete API reference for the Code component

Props

属性名类型默认值描述
asElementType'code'渲染的根元素类型，可传入 `span`、`pre` 等以复用代码样式
childrenReactNode-代码内容
classNamestring-自定义类名
...restHTMLAttributes-根元素的所有原生属性（如 `title`、`style` 等）

Type Definitions

CodeProps

行内代码组件属性接口

export interface CodeProps extends HTMLAttributes<HTMLElement> {
  as?: ElementType;
  children?: ReactNode;
  className?: string;
}