Inline Code

Inline code components are used to highlight code, commands, or technical terms within regular text content.

Basic Usage

import { InlineCode } from "@/components/docs/InlineCode"

<p>
  Install the package using <InlineCode>npm install @my/package</InlineCode>
</p>

Component Implementation

Here’s how to implement the InlineCode component:

// components/docs/InlineCode.tsx
import { cn } from "@/lib/utils"

interface InlineCodeProps {
  children: React.ReactNode
  className?: string
}

export function InlineCode({ children, className }: InlineCodeProps) {
  return (
    <code
      className={cn(
        "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
        className
      )}
    >
      {children}
    </code>
  )
}

Examples

Default Style

Use npm install package to install dependencies

Primary Style

Run yarn add package to add a new package

Warning Style

The package deprecated-package is no longer maintained

In Paragraphs

Use inline code within text content:

To create a new project, run create-next-app and follow the prompts. You can also use —typescript flag to enable TypeScript support.

With Icons

Add icons to inline code:

Run npm start to start the development server

In Lists

Use inline code in list items:

• Run npm install to install dependencies

• Use npm run dev for development

• Deploy with npm run build

Keyboard Shortcuts

Display keyboard shortcuts:

Press ⌘ + K to open the command palette

Variables

Highlight variables in text:

The NEXT_PUBLIC_API_URL environment variable must be set before running the application.

Examples in Context

API Endpoints

Send a POST request to /api/users with the required data.

Configuration

Set debug: true in your configuration file to enable logging.

Commands

Initialize the project with git init and then run git remote add origin URL.

Best Practices

1. Usage

   • Use for short code snippets
   • Highlight important terms
   • Keep content concise

2. Styling

   • Maintain readable contrast
   • Use consistent styling
   • Consider dark mode

3. Accessibility

   • Ensure proper contrast
   • Use semantic HTML
   • Consider screen readers

4. Typography

   • Use monospace fonts
   • Keep consistent sizing
   • Consider line height

5. Interaction

   • Add hover states if needed
   • Consider copy functionality
   • Handle long content