Code Leaf

PreviousNext

An inline component for code snippets.

Preview

Loading preview…
registry/ui/code-node.tsx
'use client';

import * as React from 'react';

import type { PlateLeafProps } from 'platejs/react';

import { PlateLeaf } from 'platejs/react';

export function CodeLeaf(props: PlateLeafProps) {
  return (
    <PlateLeaf
      {...props}
      as="code"
      className="whitespace-pre-wrap rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm"
    >
      {props.children}
    </PlateLeaf>
  );
}

Installation

npx shadcn@latest add @plate/code-node

Usage

import { CodeNode } from "@/components/ui/code-node"
<CodeNode />